ホームページ > 記事 > ウェブフロントエンド > ExtJS で CSS スタイルを変更する方法
ExtJS で CSS スタイルを変更する方法
- PHPzオリジナル
- 2023-04-26 18:00:121123ブラウズ
ExtJS は、Web アプリケーション開発を簡素化するために設計された強力な JavaScript ライブラリです。 ExtJS を使用して開発する場合、多くの場合、ビジネス ニーズに合わせて CSS スタイルをカスタマイズする必要があります。この記事では、ExtJS で CSS スタイルを変更する方法について説明します。
1. ExtJSで使用されるCSSを理解する
ExtJSを使用して開発を行う場合、ExtJSのCSSファイルを導入する必要があります。コマンド ライン ツールを使用して ExtJS プロジェクトを作成すると、すべての ExtJS スタイルを含むグローバル スタイル ファイル app.css が自動的に生成されます。次の方法でこのファイルを app.js に導入できます:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
requires: [
'Ext.plugin.Viewport',
'Ext.layout.*',
'Ext.form.*'
],
// 引入全局样式文件
css: ['app.css'],
mainView: 'MyApp.view.main.Main'
});
ExtJS コンポーネントでは、いくつかの CSS スタイルがデフォルトで使用され、これらのスタイルは ExtJS に付属のスタイル シート ファイルに保存されます。これらのスタイルは、ブラウザの開発者ツールで表示できます。
2. CSS スタイルを変更する方法
- ExtJS コンポーネント設定を通じてスタイルを変更する
ExtJS コンポーネントを使用する場合、設定項目 コンポーネントのスタイルを変更します。たとえば、ボタン コンポーネントのフォントの色と背景色を変更するには、次のようにします。
Ext.create('Ext.button.Button', {
text: 'My Button',
ui: 'customButton', // 通过 ui 配置修改样式
style: {
color: 'white', // 通过 style 配置修改样式
background: 'blue'
},
renderTo: 'button-container'
});
- カスタム CSS を使用します
設定項目を使用してスタイルを変更することに加えて、次のこともできます。カスタム CSS スタイル ファイルも使用します。 CSS ファイルは、ExtJS プロジェクトのindex.html ファイルに導入できます。
<!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>
カスタム CSS スタイル ファイルでは、ExtJS のコンポーネントのスタイルを変更できます。たとえば、ボタン コンポーネントのスタイルを変更するには:
.customButton {
color: white;
background-color: blue;
}
- コード内の CSS スタイルを動的に変更します
コード内の CSS スタイルを動的に変更する必要がある場合は、 JavaScript コードでは、Ext.dom を使用できます。Helper.createDom() メソッドはスタイル ノードを作成し、それを head に挿入して CSS スタイルを動的に変更します:
var styleEl = Ext.dom.Helper.createDom({
tag: 'style', // 标签名称
html: '.customButton {color: white;background-color: blue;}' // 自定义的样式
});
Ext.getHead().appendChild(styleEl); // 将节点插入到 head 中
上記のメソッドを使用すると、スタイルの変更を柔軟に制御できます私たちのニーズを満たすために。
概要
ExtJS で CSS スタイルを変更するには、主に 3 つの方法があります。構成アイテムによるスタイルの変更、カスタム CSS スタイル ファイルの使用、コード内での CSS スタイルの動的変更です。ニーズに応じて、さまざまな方法を選択できます。同時に、コンポーネントによってデフォルトで使用される ExtJS スタイルにも注意する必要があり、ブラウザー開発者ツールでスタイルを表示することで、変更が必要なスタイル クラスを見つけることができます。
以上がExtJS で CSS スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。