Ext.js-スタイル

アプリケーションスタイリングとは、コンポーネントのルックアンドフィールをユーザーが調整することです。これらの調整には、色、色のグラデーション、フォント、余白/パディングなどが含まれます。ExtJS6には、アプリケーションのスタイルを設定する新しい方法があります。

スタイリングにはSCSSを使用します。SCSSは、CSSコードを記述するためのより動的な方法です。これを利用して、スタイルシートに変数を書き込むことができます。ただし、ブラウザはSCSSを理解できません。CSSしか理解できないため、すべてのSCSSファイルをCSSにコンパイルして本番用のコードにする必要があります。

したがって、SCSSファイルはプリプロセッサファイルと呼ばれます。Ext.jsでは、コンパイルはSenchaCMDツールを介して行われます。Sencha CMDは、次のコマンドを使用して1回だけ手動でコンパイルします。

sencha app build [development]

Global_CSSはメインのCSSファイルであり、ExtJSですべてのSCSS変数が関連付けられており、必要に応じてさまざまな値を提供することでテーマをカスタマイズするためのアプリケーションで使用できます。

以下は、Ext.jsのGlobal_CSSで使用可能なCSS変数の一部です。

シニア番号	変数と説明
1	$base-color $ base-color：color（例：$ base-color：＃808080）このベースカラーは、テーマ全体で使用されます。
2	$base-gradient $ base-gradient：文字列（例：$ base-gradient： 'matte'）この基本グラデーションは、テーマ全体で使用されます。
3	$body-background-color $ body-background-color：color（例：$ body-background-color：＃808080）ボディ要素に適用する背景色。透明または「なし」に設定すると、body要素に背景色のスタイルは設定されません。
4	$color $ color：color（例：$ color：＃808080）このデフォルトのテキストの色は、テーマ全体で使用されます。
5	$font-family $ font-family：文字列（例：$ font-family：arial）このデフォルトのフォントファミリは、テーマ全体で使用されます。
6	$font-size $ font-size：数値（例：$ font-size：9px）このデフォルトのフォントサイズは、テーマ全体で使用されます。
7	$font-weight $ font-weight：文字列/数値（例：$ font-weight：normal）このデフォルトのフォントの太さは、テーマ全体で使用されます。
8	$font-weight-bold $ font-weight-bold：文字列/数値（例：$ font-weight-bold：bold）太字フォントのこのデフォルトのフォントの太さは、テーマ全体で使用されます。
9	$include-chrome $ include-chrome：ブール値（例：$ include-chrome：true） Chrome固有のルールを含めるのは本当です。
10	$include-ff $ include-ff：ブール値（例：$ include-ff：true） Firefox固有のルールを含めるのは本当です。
11	$include-ie $ include-ie：ブール値（例：$ include-ie：true） IE9以下のInternetExplorer固有のルールを含める場合はTrue。
12	$include-opera $ include-opera：ブール値（例：$ include-opera：true） Opera固有のルールを含めるのは本当です。
13	$include-safari $ include-safari：ブール値（例：$ include-safari：true） Opera固有のルールを含めるのは本当です。
14	$include-webkit $ include-webkit：ブール値（例：$ include-webkit：true） Webkit固有のルールを含めるのは本当です。