Bagaimana untuk mengubah suai gaya CSS dalam ExtJS-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengubah suai gaya CSS dalam ExtJS

PHPz

Lepaskan： 2023-04-26 18:10:09

asal

1172 orang telah melayarinya

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'
});

Salin selepas log masuk

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'
});

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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 中

Salin selepas log masuk

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!