ExtJS で CSS スタイルを変更する方法-フロントエンドQ&A-php.cn

ExtJS で CSS スタイルを変更する方法

PHPz

リリース： 2023-04-26 18:10:09

オリジナル

1173 人が閲覧しました

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 サイトの他の関連記事を参照してください。