Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengubah suai gaya CSS dalam ExtJS
Bagaimana untuk mengubah suai gaya CSS dalam ExtJS
- PHPzasal
- 2023-04-26 18:00:121123semak imbas
ExtJS ialah perpustakaan JavaScript berkuasa yang direka untuk memudahkan pembangunan aplikasi web. Apabila membangun dengan ExtJS, kami selalunya perlu menyesuaikan gaya CSS untuk memenuhi keperluan perniagaan. Artikel ini menerangkan cara mengubah suai gaya CSS dalam ExtJS.
1. Fahami CSS yang digunakan oleh ExtJS
Apabila membangun dengan ExtJS, kami perlu memperkenalkan fail CSS ExtJS. Apabila menggunakan alat baris arahan untuk mencipta projek ExtJS, app.css fail gaya global akan dijana secara automatik, yang mengandungi semua gaya ExtJS. Kami boleh memperkenalkan fail ini dalam app.js dengan cara berikut:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
requires: [
'Ext.plugin.Viewport',
'Ext.layout.*',
'Ext.form.*'
],
// 引入全局样式文件
css: ['app.css'],
mainView: 'MyApp.view.main.Main'
});
Dalam komponen ExtJS, beberapa gaya CSS akan digunakan secara lalai dan gaya ini disimpan dalam fail helaian gaya yang disertakan dengan ExtJS daripada. Gaya ini boleh dilihat dalam alat pembangun penyemak imbas anda.
2. Cara mengubah suai gaya CSS
- Ubah suai gaya melalui konfigurasi komponen ExtJS
Apabila menggunakan komponen ExtJS, kita boleh gunakan item konfigurasi Ubah suai gaya komponen. Contohnya, untuk mengubah suai warna fon dan warna latar belakang pada komponen butang:
Ext.create('Ext.button.Button', {
text: 'My Button',
ui: 'customButton', // 通过 ui 配置修改样式
style: {
color: 'white', // 通过 style 配置修改样式
background: 'blue'
},
renderTo: 'button-container'
});
- Gunakan CSS tersuai
Selain mengubah suai gaya melalui item konfigurasi, kami Fail gaya CSS tersuai juga boleh digunakan. Fail CSS boleh diperkenalkan dalam fail index.html projek ExtJS:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyApp</title> <link rel="stylesheet" type="text/css" href="resources/css/custom.css"> <!-- 引入自定义 CSS --> </head> <body> <div id="app"></div> <script src="ext/build/ext-all.js"></script> <script src="app.js"></script> </body> </html>
Dalam fail gaya CSS tersuai, kami boleh mengubah suai gaya komponen dalam ExtJS. Contohnya, ubah suai gaya komponen butang:
.customButton {
color: white;
background-color: blue;
}
- Ubah suai gaya CSS dalam kod secara dinamik
Jika anda perlu mengubah suai gaya CSS secara dinamik dalam kod JavaScript, anda boleh menggunakan Samb. Kaedah dom.Helper.createDom() mencipta nod gaya dan memasukkannya ke dalam kepala untuk mengubah suai gaya CSS secara dinamik:
var styleEl = Ext.dom.Helper.createDom({
tag: 'style', // 标签名称
html: '.customButton {color: white;background-color: blue;}' // 自定义的样式
});
Ext.getHead().appendChild(styleEl); // 将节点插入到 head 中
Menggunakan kaedah di atas, kami boleh mengawal perubahan gaya secara fleksibel untuk memenuhi keperluan keperluan kita.
Ringkasan
Terdapat tiga cara utama untuk mengubah suai gaya CSS dalam ExtJS: mengubah suai gaya melalui item konfigurasi, menggunakan fail gaya CSS tersuai dan mengubah suai gaya CSS dalam kod secara dinamik. Bergantung pada keperluan anda, anda boleh memilih kaedah yang berbeza. Pada masa yang sama, anda perlu memberi perhatian kepada gaya ExtJS yang digunakan oleh komponen secara lalai Anda boleh mencari kelas gaya yang perlu diubah suai dengan melihat gaya dalam alat pembangun penyemak imbas.
Atas ialah kandungan terperinci Bagaimana untuk mengubah suai gaya CSS dalam ExtJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!