Heim > Artikel > Web-Frontend > So ändern Sie CSS-Stile in ExtJS

So ändern Sie CSS-Stile in ExtJS

PHPzOriginal: 2023-04-26 18:00:121119Durchsuche

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

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

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>

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

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 中

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!

JavaScript css html JS dom 样式表

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So stellen Sie die Schriftfarbe in CSS auf Weiß einNächster Artikel：So stellen Sie die Schriftfarbe in CSS auf Weiß ein

In Verbindung stehende Artikel

Mehr sehen