この記事は Ext JS バージョン 4.2.1 に基づいています
UI コンポーネントの基本
ExtJS の学習は、コンポーネントの使用法を学習することです。 ExtJS4 はフレームワークを再構築します。その中で最も重要なのは、明確な構造と階層を持つコンポーネント システムの形成です。これらのコンポーネントは Ext コントロールを形成します。
ExtJs4 のコンポーネント システムには 100 近くのコンポーネントがあり、これらのコンポーネントはコンテナ コンポーネント、ツールバーとメニュー バーのコンポーネント、フォームと要素のコンポーネント、その他のコンポーネントという 4 つの主要なカテゴリに大別できます。
テーマ
ExtJs4 では、Sass および Compass テクノロジーを使用して標準テーマ テンプレートを提供する新しいテーマ システムを導入し、テーマ テンプレートを簡単にカスタマイズすることで、さまざまなカラフルなテーマを作成できます。
Sass と Compass の概要
Sass
Sass スタイル シート言語は CSS の拡張であり、変数、インライン ルール、ミックスイン、CSS 継承などのセレクターを提供します。最新の Sass3 では、CSS3 と 100% 互換性があり、構文ファイルも SCSS (Sassy CSS) にアップグレードされています。この互換性により、学習コストが削減され、開発者はスムーズに学習できます。 CSS から Sass 開発への移行。
Sass スタイル シート言語は、CSS カスケード スタイル シートのプログラミング機能を提供します。Sass で変数を定義して、さまざまなスタイルで参照したり、別の場所で再利用できるミックスインを定義したりできます。これらの機能は CSS では利用できません。コンパイル後、Sass はさまざまなブラウザで使用できる標準 CSS ファイルを出力します。
Sass の機能:
ミックスイン - クラス内のクラス;
パラメーター ミックスイン - 関数と同様にパラメーターを渡すことができるクラス
ネスト ルール - クラス内にクラスをネストします。
操作 - CSS で数学を使用します。
名前空間 - スタイルをローカルで変更できます。 🎜> JavaScript の割り当て - JavaScript 式を使用して CSS で値を割り当てます。
Sass の詳細な紹介と説明は、http://sass-lang.com/ でご覧いただけます。
Compass
Compass は、CSS 作成用の Ruby ベースのオープンソース フレームワークです。 Compass には Sass スタイル シート言語が使用されており、スタイル シートを非常に簡単かつ効率的に構築できます。同時に、開発者が使用できる Web 開発用の優れた再利用可能なパターンが多数組み込まれています。 Compass の役割を示すために、以下で簡単な方程式を使用します。
Compass = Sass スタイル シート言語での再利用可能な多数の優れた CSS パターン
Compass の詳細な紹介と説明は、次の場所にあります: http:/ /compass-style.org/
準備作業 (実行環境のインストール)
Ruby のインストール
SASS と Compass を使用するには、Ruby のインストール パッケージを http://rubyinstaller.org/ からダウンロードできます。ダウンロードしたファイルは「rubyinstaller-1.9.3-p429.exe」です。
(最新バージョンの Ruby 2.0.0-p195 をダウンロードしないでください。ダウンロードしないと、その後の開発中にバージョンの問題によりエラーが発生します。Ruby 1.9.3-p429 を使用しても問題ありません。)
ダブルクリックして実行しますの手順は次のとおりです:
インストール ディレクトリで 3 つのオプションをすべて選択することに注意してください。
「完了」をクリックします。
この時点で、Ruby のインストールは完了です。
スタート メニューの Ruby プログラム グループで、[Ruby でコマンド プロンプトを起動する] をクリックします。
Ruby のコマンドラインインターフェイスに入ります。
ruby –v
と入力して Enter キーを押します。インターフェイス プロンプトは次のとおりです:
は、Ruby オペレーティング環境が正常にインストールされたことを示します。
Compass と Sass をインストールする
Compass を使用するには、まず Ruby にフレームワークをインストールする必要があります。
スタートメニューのRubyプログラムグループの下にある「Rubyでコマンドプロンプトを起動する」をクリックし、コマンドプロンプトウィンドウを表示します。コマンドラインに次のコマンドを入力して、Compass のインストールを開始します:
gem install compass
(このコマンドは、Compass 関連のドキュメントをローカル フォルダーにリモートで自動的にインストールします。リモート インストール方法のため、インストール時間は長くなります。お待ちください。)
以下のような情報がウィンドウに表示されたら、Compass が正常にインストールされたことを意味します。
画像の通り、sass-3.2.9版とcompass-0.12.2版がインストールされています。
コマンドラインで compass -v と sass -v を実行して、現在のシステムにインストールされているバージョン情報をそれぞれ表示します。
この時点で、Sass と Compass のインストールは完了しました。
Compass プロジェクト (Css にコンパイルされた Sass)
1. プロジェクトの初期化
次に、Compass プロジェクトを作成する必要があります。その名前を myproject として、コマンド ラインに次のように入力します。
myproject サブディレクトリが現在のディレクトリに生成されます。
ディレクトリを入力します:
cd myproject
中に、プロジェクトの構成ファイルである config.rb ファイルがあることがわかります。 sass と stylesheet という 2 つのサブディレクトリもあります。前者には Sass ソース ファイルが保存され、後者にはコンパイルされた CSS ファイルが保存されます。
次に、コードの記述を開始できます。
2. コンパイル
コードを記述する前に、コンパイル方法を知る必要もあります。書き込むのは接尾辞 scss が付いたファイルであるため、css ファイルにコンパイルされた場合にのみプロジェクト内で使用できます。 Compass のコンパイル コマンドは
compass apply
です。このコマンドはプロジェクトのルート ディレクトリで実行され、sass サブディレクトリにある scss ファイルを css ファイルにコンパイルし、stylesheets サブディレクトリに保存します。
デフォルトでは、コンパイルされた CSS ファイルには多数のコメントが含まれています。ただし、運用環境では圧縮された CSS ファイルが必要であり、その場合は --output-style パラメータを使用する必要があります。
compass apply --output-style COMPLEX
Compass は変更されたファイルのみをコンパイルします。変更されていないファイルを再コンパイルする場合は、--force パラメーターを使用する必要があります。
compass apply --force
コマンド ライン パラメーターの使用に加えて、構成ファイル config.rb でコンパイル モードを指定することもできます。
output_style = :expanded
: 拡張モードは、コンパイル後に元の形式が保持されることを意味します。他の値には、:nested、:compact、および :compressed が含まれます。
説明:
* ネスト: ネストされたインデントされた CSS コード。これがデフォルト値です。
* 展開: インデントされていない、展開された CSS コード。
* コンパクト: 簡潔な形式の CSS コード。
* 圧縮: 圧縮された CSS コード。
実稼働段階に入ったら、圧縮モードに変更する必要があります。
output_style = :compressed
環境値 (:production または:development) を指定することで、コンパイル モードをインテリジェントに決定することもできます。
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
コマンド ライン モードでは、1 回限りのコンパイル コマンドに加えて、compass には自動コンパイルもありますコマンド
compass watch
このコマンドを実行すると、scss ファイルが変更されるたびに、自動的に css ファイルにコンパイルされます。
コンパスのコマンドラインの使用法について詳しくは、公式ドキュメントを参照してください。
Compass、Sass、eclipse の統合
上記の構成により、テキスト コンパイラーなどで Sass ファイルを編集し、対応するディレクトリ構造を介して Ruby を介して Sass を css にコンパイルし、コピー アンド ペーストすることができます。開発は私たちのプロジェクト内で行われます。このプロセスは比較的面倒であることがわかります。では、Eclipse で Sass ファイルを直接編集し、エンジニアリング アプリケーション用の CSS に自動的にコンパイルするにはどうすればよいでしょうか? 以下は Compass、Sass、Eclipse の統合に関する研究です。
1 Antがインストールされていることを確認します
2 プロジェクトの「プロパティ」を開き、「Builders」を選択し、「新規...」ボタンをクリックします
3 「Ant Builder」を選択し、 をクリックします「OK」
4 「compass.compile」という名前を入力し、「メイン」タブページの「ワークスペースの参照」をクリックして、プロジェクトに配置されているbuild.xmlファイルを選択します。
5 「ターゲット」タブを選択し、自動ビルドの「ターゲットの設定」ボタンをクリックし、Compass を使用するために「compass.compile」を選択し (「sass.compile」は Sass を使用するだけです)、「OK」をクリックします
6 [ビルド オプション] タブを選択し、[リソースの選択] ボタンをクリックし、Sass ファイル ディレクトリを選択して、[完了] をクリックし、[OK] をクリックします。
Sass ファイルを編集するときに、css ファイルが自動的に作成または更新されるようになりました。
Sencha CMD のインストール
Sencha CMD は、ExtJ および Sencha Touch アプリケーションをパッケージ化してデプロイするためのコマンドライン ツールです。 ExtJs4.2 テーマを開発するには、Sencha CMD3.1 以降をインストールする必要があります。
7 Java ランタイム環境または JRE をインストールします。バージョンは 6.0 以降が必要です。
8 スタイルを編集するにはCompassとSassが必要なのでRubyのインストールが必要です。最新バージョンの Ruby2.0.0-p195 をダウンロードしないでください。ダウンロードしないと、その後の開発中にバージョンの問題によりエラーが発生します。 Ruby 1.9.3-p429 で十分です。
9 Sencha Cmd インストール パッケージをダウンロードしてインストールします。
10 Ext JS SDK をダウンロードして解凍します。
ExtJS カスタム テーマ スタイルの開発
2.3.1 ワークスペースの作成
(注意: ディレクトリ名などに中国語を使用しないでください。特殊な記号は使用しないことをお勧めします。使用しないとエラーが発生します)
システム cmd コマンドを開きます。ウィンドウを実行し、SDK が解凍されたディレクトリに移動します。
sencha -sdk d:/ExtJs4-App/ext-4.2.1.883generate workspace my-workspace
と入力して、my-workspace という名前のカスタム テーマ パッケージを含むワークスペースを作成します。このコマンドは、テーマとアプリケーションが必要な依存関係を見つけられるように、Ext JS SDK とパッケージをワークスペースに関連付けます。このコマンドで生成されたテーマとアプリケーションはワークスペース ディレクトリで実行する必要があるため、作業ディレクトリを新しい「my-workspace」ディレクトリに変更します。
cd my-workspace
「my-workspace」にいるはずです。フォルダーの下に 2 つのフォルダーが表示されます:
l "ext": Ext JS SDK が含まれます
l "package" には Ext JS ロケールとテーマ パッケージが含まれます
2.3.2 テスト用のアプリケーション テーマを生成します
カスタム テーマを作成する前に、テーマをテストするメソッドを設定する必要があります。これをテストする最良の方法は、アプリケーション内で使用することです。 「my-workspace」ディレクトリで次のコマンドを実行します。
sencha -sdk extgenerate app ThemeDemoApp theme-demo-app
これにより、Sencha Cmd に ThemeDemoApp という名前のアプリケーションが Ext JS SDK にも関連付けられます。 「Ext」ディレクトリ内。次に、アプリをビルドしましょう:
cd theme-demo-app
sencha app build
アプリを実行するには 2 つの方法があります:
11 開発モード: 「theme-demo-app/index.html」を開きます。 html」。
このリソース (ソース ファイル) は圧縮されていないため、デバッグが簡単です。
12 製品モード: ブラウザーで「build/ThemeDemoApp/production/index.html」を開きます。
これは、アプリケーションのメモリ使用量を小さくし、パフォーマンスを向上させるために、リソース (ソース ファイル) を圧縮します。
2.3.3 テーマ パッケージとファイル構造を生成する
Sencha Cmd を使用すると、テーマ パッケージとファイル構造を自動生成できます。 「theme-demo-app」の下で次のコマンドを実行します:
sencha 生成テーマ my-custom-theme
これは、Sencha Cmd に現在のワークスペース Bag の下に「my-custom-theme」という名前のテーマを作成するように指示します。
その内容を見てみましょう:
l “package.json” – これはパッケージのプロパティ ファイルです。これは、名前、バージョン、依存関係 (他のパッケージに必要な設定) などのパッケージ情報を Sencha Cmd に伝えます。
l "sass/" - このディレクトリには、テーマに関連するすべての sass ファイルが含まれています。 Sass ファイルは 3 つの主要な部分に分かれています:
1) "sass/var/" - Sass 変数が含まれます;
2) "sass/src/" - 使用できる Sass ルールと UI mixin 呼び出しが含まれます。 「sass/var/」の下の変数;
3) 「sass/etc/」 - 追加のパブリック関数を含むファイル、または「sass/var/」と「sass/src/」が混在するファイル これらのファイルは構造化された一致である必要があります。コンポーネントのクラスパス。たとえば、Ext.panel.Panel のスタイル変数は、「sass/var/panel/Panel.scss」という名前のファイルに配置する必要があります。
l "resources/" - テーマに必要な画像やその他の静的リソースが含まれます。
l "overrides/" - Ext JS コンポーネント クラス (コンポーネントをテーマにするクラス) を置き換える JavaScript が含まれています。
2.3.4 テーマの継承の構成
テーマ パッケージは通常、非常に重要な追加機能を備えた特別なパッケージであり、他のテーマ パッケージから継承できます。 Ext Js 4.2 の新しいバージョンは、テーマ パッケージのこの機能を使用してテーマ階層を作成します。
各テーマ パッケージは、Base テーマから拡張する必要があります。カスタム テーマを作成する次のステップは、どのテーマを拡張するかを決定することです。ワークスペースには次のテーマ パッケージが表示されます。
l "ext-theme-base" -- このパッケージは、他のテーマの基本テーマです。これは、親テーマのない唯一のテーマ パッケージです。これには、Ext JS コンポーネントとレイアウトを正しく動作させるために必要な CSS ルールを設定するための最小値が含まれています。 「ext-theme-base」のスタイル ルールは派生テーマでは構成できないため、このテーマによって作成されたスタイル ルールをオーバーライドすることは避けてください。
l "ext-theme-neutral" -- ほとんどの構成可能なスタイル ルールを含む、"ext-theme-base" から拡張されています。変数のほとんどは、「ext-theme-neutral」で定義された Ext JS コンポーネントのスタイルを設定するために使用されます。これらの変数はカスタム テーマに置き換えることができます。
l "ext-theme-classic" -- デフォルトのテーマ。 「ext-theme-neutral」から拡張されました。
l "ext-theme-gray" -- "ext-theme-classic" から拡張
l "ext-theme-access" -- "ext-theme-classic" から拡張。
l "ext-theme-neptune" -- "ext-theme-neutral" から拡張されました。
カスタムテーマ拡張機能の開始ノードとして「ext-theme-neptune」または「ext-theme-classic」を使用することをお勧めします。これは、これらのテーマには、魅力的ですぐに使用できるテーマを作成するために必要なコードがすべて含まれているためです。 「ext-theme-neutral」は非常に抽象的なテーマなので、拡張機能に直接使用しないでください。 「ext-theme-neutral」に基づいてカスタム テーマを拡張するには、何百もの変数カバレッジと過度の作業負荷が必要であり、非常に高度なテーマ開発者のみがこの作業を実行できる場合があります。逆に、「ext -theme-neptune」または「」を使用すると、 ext-theme-classic」は、いくつかの変数を変更するだけで数分で起動して実行できます。あるいは、カスタム テーマのより理想的な開始点を提供する場合は、「ext-theme-gray」または「ext-theme-access」をオーバーライドすることもできます。
たとえば、「ext-theme-neptune」で拡張されたカスタム テーマを作成します。まず、ディレクトリ "packages/my-custom-theme/package.json":
"extend": "ext-theme-classic"
を
"extend": "ext- theme-neptune"
今すぐアプリを更新する必要があります。アプリケーションが開発モードで実行できるように、正しいテーマの JavaScript ファイルがアプリケーション「bootstrap.js」に含まれていることを確認してください。 「theme-demo-app」ディレクトリで次のコマンドを実行します。
sencha アプリの更新
2.3.5 グローバル テーマ変数の構成
独自のテーマ パッケージを作成したので、テーマの外観の変更を開始できます。まず、ExtJs コンポーネントのパブリック カラーを導出できる基本カラーを変更します。 「my-custom-theme/sass/var/」の下に、Component.scss という名前のファイルを作成し、そのファイルに次のように入力します。
$base-color: #317040 !default;
必要に応じて、カスタム テーマを次のように入力します。拡張可能であるため、必ずすべての変数の最後に !default を設定してください。 !default がないと、派生テーマの変数をオーバーライドできません。これは、Sencha Cmd 変数が「逆」ルール (ほとんどの派生スタイルが最初、基本スタイルが最後) に従うためです。 !default の詳細については、「変数のデフォルト」を参照してください。
Ext JS グローバル SASS 変数の完全なリストについては、Global_CSS を参照してください。
2.3.6 パッケージのビルド
すべてのカスタマイズされたスタイル ルールの CSS ファイルを生成するには、「packages/my-custom-theme/」ディレクトリでコマンドを実行する必要があります:
sencha package build
この A ディレクトリはパッケージの下に構築されます。「my-custom-theme/build/resources」の下に、my-custom-theme-all.css という名前のファイルがあります。このファイルには、すべての Ext JS コンポーネントのスタイル ルールが含まれています。このファイルをアプリケーションで直接使用することもできますが、「all」ファイルにはすべてのスタイルが含まれているものの、Ext JS コンポーネントとほとんどのアプリケーションは Ext JS コンポーネントのサブセットのみを使用するため、これはお勧めできません。 Sencha Cmd は、アプリケーションの構築時に未使用の CSS スタイル ルールをフィルターで除外できますが、最初にカスタム テーマを使用するようにテスト アプリケーションを構成する必要があります。
2.3.7 1 つのアプリケーションでテーマを使用する
作成したカスタム テーマ用にテスト アプリケーションを構成します。場合は、theme-demo-app/.sencha/app/sencha.cfg
app.theme=ext-theme-classic
を見つけて、
app.theme=my-custom-theme
に変更します。クラシック テーマを使用してビルドされたアプリケーションを実行した後は、ビルド ディレクトリをクリーンアップする必要があります。 theme-demo-app から実行します:
sencha ant clean
次に、アプリケーションをビルドします:
sencha app build
ブラウザで「theme-demo-app/index.html」を開くと、次のことが表示されます。以下に進みます。
2.3.8 コンポーネント変数の構成
各 Ext JS コンポーネントには、その外観を構成するために使用できるグローバル変数のリストがあります。次に、パネルタイトルのフォントの種類を変更してみましょう。次のコードを使用してファイル「packages/my-custom-theme/sass/var/panel/Panel.scss」を作成します:
$panel-header-font-family: Times New Roman !default;
In "テーマ - 「demo-app」の下で実行します:
sencha app build
ブラウザで「theme-demo-app/index.html」を開くと、次の
が各セクションに表示されます。 API ドキュメント 「CSS 変数」セクションには、コンポーネント SASS 変数の詳細なリストがあります。
2.3.9 カスタムコンポーネント UI を作成する
ExtJs フレームワークでは、各コンポーネントに構成インターフェイスがあります (デフォルトは「default」)。このプロパティは、単一のコンポーネント インスタンス上で構成して、同じタイプの他のコンポーネントと区別し、異なる外観を与えることができます。
次のコードを使用してファイル「packages/my-custom-theme/sass/src/panel/Panel.scss」を作成します:
「theme-demo-app」でプログラムを実行します:
sencha アプリのビルド
ブラウザで「theme-demo-app/index.html」を開くと、次の内容が表示されます
UI は複数の外観設定を 1 つのコンポーネントに混合する便利な方法ですが、過度に使用すべきではありません。 UI mixin を呼び出すたびに追加の CSS ルールが生成されるため、UI mixin を無料で呼び出すと、過度に大きな CSS ファイルが生成されます。
覚えておくべきもう 1 つの重要な点は、UI ミックスインを呼び出すときは、パラメーター値のない順序付きリストではなく、名前付きパラメーターを使用してミックスインを呼び出すことであるということです。 SASS は両方の形式をサポートしていますが、この形式を使用することをお勧めします:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
