Extjs-styling

Ext.js-スタイル

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

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

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

sencha app build [development]

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

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

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