extjs ubah suai css

Dalam pembangunan aplikasi web moden, gaya pada halaman adalah berwarna-warni dan sangat penting. Apabila halaman menjadi lebih kompleks, adalah perkara biasa untuk menggunakan rangka kerja dan perpustakaan untuk memudahkan operasi penggayaan. Antaranya, ExtJS ialah rangka kerja JavaScript yang sangat popular yang boleh digunakan untuk membina aplikasi web berskala besar dan berkuasa.

Dalam ExtJS, banyak kawalan diberikan berdasarkan CSS. Oleh itu, kadangkala adalah perlu untuk mengubah suai gaya kawalan tertentu atau menambah beberapa gaya tersuai untuk memenuhi keperluan tertentu. Artikel ini akan memperkenalkan cara mengubah suai gaya CSS dalam ExtJS.

Pertama sekali, anda perlu memahami struktur fail gaya dalam ExtJS. Semua fail gaya terletak dalam direktori /ext/packages, dan laluan tertentu mungkin berbeza-beza bergantung pada versi. Setiap komponen mempunyai helaian gaya khusus, contohnya gaya untuk butang berada dalam fail /ext/packages/core/build/resources/core-all.css.

Untuk mengubah suai gaya kawalan, anda boleh mentakrifkan gaya baharu atau mengubah suai gaya sedia ada dalam fail .scss. .scssFail ditulis dalam bahasa Sass, yang memudahkan pengendalian helaian gaya seperti peraturan bersarang, pembolehubah, campuran, dsb.

Dalam ExtJS, setiap kawalan mempunyai kelas CSS khusus, dan gaya kawalan boleh diubah suai dengan mengubah suai kelas. Contohnya, jika anda ingin mengubah suai warna butang, anda boleh menggunakan kod berikut:

.x-btn {
    background-color: #f00;
}

Apabila menulis fail .scss, anda perlu memberi perhatian kepada perkara berikut:

• ExtJS akan mengendalikan semua .scss fail dan menjana fail CSS termampat, jadi anda tidak perlu mempertimbangkan isu prestasi semasa menulis gaya.
• Anda boleh menggunakan pembolehubah untuk menentukan nilai boleh guna semula seperti warna, saiz, dsb. untuk mengelakkan pertindihan kod.
• Anda boleh menggunakan mixin untuk berkongsi gaya, seperti memperkenalkan gaya yang mengandungi kedua-dua warna dan saiz melalui @include.

Untuk beberapa kawalan, anda mungkin perlu menyesuaikan beberapa kelas CSS untuk menangani keperluan yang lebih khusus. Dalam kes ini, anda boleh menggunakan atribut cls untuk menetapkan kelas CSS tersuai untuk kawalan. Contohnya, jika anda ingin menambah kelas CSS bernama my-panel pada panel, anda boleh menggunakan kod berikut:

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    cls: 'my-panel',
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

dan kemudian tentukan gaya kelas .scss dalam fail my-panel .

Selain mengubah suai gaya dalam fail .scss, anda juga boleh mengubah suai gaya pada masa jalan menggunakan kod JavaScript. Setiap komponen mempunyai elemen DOM yang diinstakan dan gayanya boleh diubah suai melalui atribut style elemen tersebut. Contohnya, jika anda ingin menggunakan kod JavaScript untuk menukar warna latar belakang panel kepada hijau, anda boleh menggunakan kod berikut:

var panel = Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
panel.getEl().setStyle('background-color', 'green');

Perlu diingat bahawa jika gaya kawalan tertentu perlu digunakan di berbilang tempat, adalah lebih baik untuk menentukannya dalam fail .scss. Ini menjadikan kod gaya lebih jelas dan lebih boleh diselenggara, dan gaya boleh diubah suai dengan mudah.

Ringkasnya, mengubah suai gaya CSS dalam ExtJS boleh dicapai menggunakan fail .scss atau kod JavaScript. Anda boleh memilih kaedah yang hendak digunakan berdasarkan situasi tertentu, atau menggunakan kedua-duanya pada masa yang sama untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci extjs ubah suai css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!