So ändern Sie CSS-Stile in ExtJS-Front-End-Fragen und Antworten-php.cn

So ändern Sie CSS-Stile in ExtJS

PHPz

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

Original

1173 Leute haben es durchsucht

ExtJS ist eine leistungsstarke JavaScript-Bibliothek, die die Entwicklung von Webanwendungen vereinfachen soll. Bei der Entwicklung mit ExtJS müssen wir häufig CSS-Stile anpassen, um den Geschäftsanforderungen gerecht zu werden. In diesem Artikel wird erläutert, wie Sie CSS-Stile in ExtJS ändern.

1. Verstehen Sie das von ExtJS verwendete CSS

Bei der Entwicklung mit ExtJS müssen wir die CSS-Datei von ExtJS einführen. Wenn Sie das Befehlszeilentool zum Erstellen eines ExtJS-Projekts verwenden, wird automatisch eine globale Stildatei app.css generiert, die alle ExtJS-Stile enthält. Wir können diese Datei wie folgt in app.js einführen:

Ext.application({
    name: 'MyApp',
    extend: 'MyApp.Application',
    requires: [
        'Ext.plugin.Viewport',
        'Ext.layout.*',
        'Ext.form.*'
    ],
    // 引入全局样式文件
    css: ['app.css'],
    mainView: 'MyApp.view.main.Main'
});

Nach dem Login kopieren

In ExtJS-Komponenten werden standardmäßig einige CSS-Stile verwendet, und diese Stile werden in der Stylesheet-Datei gespeichert, die mit ExtJS geliefert wird. Diese Stile können in den Entwicklertools Ihres Browsers angezeigt werden.

2. So ändern Sie CSS-Stile

Ändern Sie Stile über die ExtJS-Komponentenkonfiguration

Bei Verwendung von ExtJS-Komponenten können wir den Komponentenstil über Konfigurationselemente ändern. Um beispielsweise die Schrift- und Hintergrundfarbe einer Schaltflächenkomponente zu ändern:

Ext.create('Ext.button.Button', {
    text: 'My Button',
    ui: 'customButton', // 通过 ui 配置修改样式
    style: {
        color: 'white',  // 通过 style 配置修改样式
        background: 'blue'
    },
    renderTo: 'button-container'
});

Nach dem Login kopieren

Benutzerdefiniertes CSS verwenden

Zusätzlich zur Änderung des Stils über Konfigurationselemente können wir auch benutzerdefinierte CSS-Stildateien verwenden. CSS-Dateien können in die Datei index.html des ExtJS-Projekts eingefügt werden:

<!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>

Nach dem Login kopieren

In der benutzerdefinierten CSS-Stildatei können wir den Stil der Komponenten in ExtJS ändern. Ändern Sie beispielsweise den Stil der Schaltflächenkomponente:

.customButton {
    color: white;
    background-color: blue;
}

Nach dem Login kopieren

Den CSS-Stil im Code dynamisch ändern

Wenn Sie den CSS-Stil im JavaScript-Code dynamisch ändern müssen, können Sie den Ext.dom.Helper verwenden. createDom()-Methode zum Erstellen eines Stilknotens und Einfügen in den Kopf, um den CSS-Stil dynamisch zu ändern:

var styleEl = Ext.dom.Helper.createDom({
    tag: 'style', // 标签名称
    html: '.customButton {color: white;background-color: blue;}'  // 自定义的样式
});
Ext.getHead().appendChild(styleEl);   // 将节点插入到 head 中

Nach dem Login kopieren

Mit der oben genannten Methode können Stiländerungen flexibel gesteuert werden, um unseren Anforderungen gerecht zu werden.

Zusammenfassung

Es gibt drei Hauptmethoden zum Ändern von CSS-Stilen in ExtJS: Ändern von Stilen über Konfigurationselemente, Verwenden benutzerdefinierter CSS-Stildateien und dynamisches Ändern von CSS-Stilen im Code. Je nach Bedarf können Sie verschiedene Methoden wählen. Gleichzeitig müssen Sie auf den von der Komponente standardmäßig verwendeten ExtJS-Stil achten. Sie können die Stilklasse finden, die geändert werden muss, indem Sie den Stil in den Browser-Entwicklertools anzeigen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS-Stile in ExtJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!