extjsでCSSを変更する

最新の Web アプリケーション開発では、ページ上のスタイルはカラフルで非常に重要です。ページが複雑になるにつれて、フレームワークやライブラリを使用してスタイル設定操作を簡素化することが非常に一般的になります。その中でも、ExtJS は、大規模で強力な Web アプリケーションの構築に使用できる、非常に人気のある JavaScript フレームワークです。

ExtJS では、多くのコントロールが CSS に基づいてレンダリングされます。したがって、特定のニーズを満たすために、特定のコントロールのスタイルを変更したり、カスタム スタイルを追加したりする必要がある場合があります。この記事ではExtJSでCSSスタイルを変更する方法を紹介します。

まず、ExtJS のスタイル ファイル構造を理解する必要があります。すべてのスタイル ファイルは /ext/packages ディレクトリにあります。具体的なパスはバージョンによって異なる場合があります。各コンポーネントには専用のスタイル シートがあります。たとえば、ボタンのスタイルは /ext/packages/core/build/resources/core-all.css ファイルにあります。

コントロールのスタイルを変更するには、.scss ファイルで新しいスタイルを定義するか、既存のスタイルを変更します。 .scss ファイルは Sass 言語で記述されているため、ネストされたルール、変数、ミックスインなどのスタイル シートの処理が容易になります。

ExtJS では、各コントロールに専用の CSS クラスがあり、クラスを変更することでコントロールのスタイルを変更できます。たとえば、ボタンの色を変更する場合は、次のコードを使用できます。

.x-btn {
    background-color: #f00;
}

.scss ファイルを作成するときは、次の点に注意する必要があります。 :

• ExtJS すべての .scss ファイルが処理され、圧縮された CSS ファイルが生成されるため、スタイルを記述するときにパフォーマンスの問題を考慮する必要はありません。
• 変数を使用して、色、サイズなどの再利用される値を定義し、コードの重複を避けることができます。
• ミックスインを使用すると、@include を通じて色とサイズの両方を含むスタイルを導入するなど、スタイルを共有できます。

一部のコントロールでは、より具体的なニーズを満たすために一部の CSS クラスをカスタマイズする必要がある場合があります。この場合、cls プロパティを使用してコントロールのカスタム CSS クラスを設定できます。たとえば、クラス名 my-panel の CSS クラスをパネルに追加する場合は、コード

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    cls: 'my-panel',
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

を使用して、## で定義します。 #.scss ファイル my-panel クラスのスタイルで十分です。

.scss ファイル内のスタイルを変更するだけでなく、JavaScript コードを使用して実行時にスタイルを変更することもできます。各コンポーネントにはインスタンス化された DOM 要素があり、そのスタイルは要素の style 属性を通じて変更できます。たとえば、JavaScript コードを使用してパネルの背景色を緑に変更する場合は、次のコードを使用できます。

var panel = Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
panel.getEl().setStyle('background-color', 'green');

特定のコントロールのスタイルを変更する必要がある場合に注意してください。複数の場所で使用される場合は、

.scss ファイルで定義するのが最善です。これにより、スタイル コードがより明確になり、保守しやすくなり、スタイルを簡単に変更できます。

つまり、ExtJS での CSS スタイルの変更は、

.scss ファイルまたは JavaScript コードを使用して実現できます。特定の状況に基づいてどちらの方法を使用するかを選択することも、両方を同時に使用してより良い結果を達成することもできます。

以上がextjsでCSSを変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。