ここでは、Ext JS バージョンの Architect のツールボックスにあるビューコンポーネントのカテゴリに関する全般的な説明を行います。ツールボックス内のいずれかのコンポーネント名の隣のクエスチョンマークをクリックすると、その簡単な説明と、Ext JS APIドキュメンテーションへのリンクをテキストボックス内に表示されます。それぞれのコンポーネントの詳細な説明については、リンク先を参照してください。このセクション内のリンクも Ext JS API ドキュメンテーションにリンクされています。
Ext JS コンポーネントカテゴリ
ツールボックスでは、Ext JS のビューを以下のカテゴリに分類しています。
- Containers（コンテナ）
- Charts, including Chart Series and Chart Axis（チャート。Chart SeriesとChart Axisを含む）
- Form Fields（フォームフィールド）
- Grids, including Grid Columns, Grid Features, Grid Selections, and Grid Views（グリッド。Grid Column、Grid Selection、Grid Viewを含む）
- Menus（メニュー）
- Standard（スタンダード）
- Toolbar（ツールバー）
- Tree（ツリー）
- Views（ビュー）
それぞれのコンポーネントについてさらに詳しく見ていきましょう。
Containers
コンテナは、他のコンポーネントを含むことができるコンポーネントです。Architect では、標準的な Ext JS コンテナから開発者が UI 開発に最良のものを選択できます。コンテナの種類を以下に示します。
コンテナ。他のコンポーネントを配置できる最もシンプルなコンポーネントです。以下に示す他のコンテナはこのコンテナクラスを継承しています。Containerは、単なる論理的コンテナであり、視覚的な特徴を何も持ちません。
FieldContainer.UIへ簡単に複数のフィールドをフォームと同じ列に表示させたり、ラベルを付けたり、他のフォームフィールドの表示に合わせて任意のメッセージを表示させることができます。FieldContainerは一般的に、マルチパートの名前のフィールドとして使用されます。また、FieldContainerには単にテキストフィールドとしてでなく、どんな種類のフォームフィールドでも含ませることができます。フィールドをFieldContainerへドラッグするか、既存のフィールドをコピーして追加することができます。
FieldSet.FieldSet は、Form Panel 内の関連するフィールドをグループ化し、フォーム内の要素を視覚的に区分するために使われます。例えば、オンラインショップでの形式は、請求先住所と配送先住所のフィールドをグループごとに分けなければなりません。FieldSetは、それ自身かフォーム内で使用され、上部にタイトルを持ちます。一般的に、FieldSetはフォームフィールドを含んでいますが、FieldSetはネストしたコンテナを含むことも可能です。例えば、ネストされたコンテナコンポーネントは、マルチカラムレイアウトを作成するために、FieldSet内で使用することができます。
Form Panel.フォームフィールドやラベルの集まりをグループ化し、フォームの情報の確認や送信する機能を追加するためのパネルです。様々なフォームフィールドに加えて、ContainerやFieldSetはForm Panelへ追加できるようなコンテナでもあります。例えば、ネストしたContainersはマルチカラムフォームを構築するために使用されます。
Panel.UI の基本的な構成要素で、堅牢なアプリケーション機能を提供します。Panel はどのタイプのコンテナにも追加することができ、サブコンポーネントを body エリアに追加したり、四辺にドッキングしたりすることもできます。Ext JS では、汎用的な Panel コンテナに加えて、Form Panel、Tab Panel、Grid Panel、Tree Panel など、さまざまなパネルの特殊化を提供しています。Windowコンテナも同様に、Panelを継承しています。
Tab Panel.特殊化されたパネルの一つで、ネストしたコンポーネントのコレクションを、カードレイアウトを使って別々のタブとして表示します。Architect では、デフォルトで 3 つのタブコンポーネントを備えたタブパネルをキャンバスに追加します。さらに、各タブにはさらにサブコンポーネントを追加することができ、Tab Panel上にコンポーネントをドラッグすることで、タブを追加することができます。
Viewport.ブラウザ内のアプリケーションが表示可能な領域を表現するために使用されます。Viewportは自動的にそのサイズをブラウザのビューポートサイズと合わせます。各ページに1つしかViewportを配置できませんが、ネストされたパネル（それ自身がレイアウトとネストされたコンポーネントをもつ）を含むことができます。Viewportではスクロールはできません。 もし必要ならば、Viewport内で、スクロールか可能な子コンポーネント使用してください。
Window.サイズ変更やドラッグが可能なパネルです。Windowsは、最大化でビューポートを埋め尽くし、最小化することもできます。 また、以前に開いたサイズを保存しておくこともできます。普通のパネルとは異なり、Windowsは開かれたり、閉じたりすることができます。Windowsは通常、ダイアログやエラーを表示するために使用されます。
Charts
Ext JS 4のチャートでは、様々な種類のチャートで複雑なデータストアを視覚的に表現します。Chartsのツールボックスには、チャート軸やチャートシリーズが一時的なデータストア内のデータと一緒に、あらかじめ定義されています。この中からチャートをプロジェクトへ追加するならば、あらかじめ設定されていたデータストアを用意した実際のデータストアへ変更する必要があります。アプリケーションとそのUIに応じて、チャートの子要素である軸とシリーズアイテムを変更、追加、移動することがでいます。
Architectのツールボックスはチャートコンポーネントを以下の３つのセクションに分類しています。
Charts 以下のあらかじめ定義されているチャートを選択できます。横棒、縦棒、ゲージ、凡例、円、レーダー、積み上げ横棒グラフです。
Chart Series サポートされているチャートシリーズ、つまり、データストア内の実際のレコードの表現が含まれています。 その中には目盛り、強調、チップ、コールアウトなども含まれています。マウスイベントも含まれていて、アニメーションや、要素の表示・非表示、凡例の色や、その他のイベントの設定が行えます。例えば、データを横棒グラフとして表示する Bar Series、データを縦棒グラフとして表示する Column Series、1 つのデータを円弧状のゲージとして表示する Gauge Series があります。
Chart Axis サポートされているチャート軸、つまり、チャート軸の表示に使われる、単数または複数の次元のデータのための、目盛りや値ラベル付きのスケールが含まれています。軸の位置、種類、スタイルを設定することもできます。例えば、Category Axis は年月や人名などの数値以外のデータを表示するのに使用し、Gauge Axis は、Gauge Series の目盛を円弧状に表示するのに使用し、Numeric Axis は、訪問者数や株価などの数値データを表示するのに使用します。
Form Fields
フォームフィールドは、フォームを作成する際にForm Panelコンテナへ追加するコンポーネントのことです。Ext JSでは、CheckboxやCheckbox Group、ComboBox、Data Field、HTML Editor、Label、Text fieldなどを含むあらゆる種類のフォームを構築するために使用するフィールドが提供されています。関連するフィールドをグループ化するには、それらをForm Panel内にネストされているFieldSetコンテナ内へ配置します。マルチカラムフォームを作成したい場合、カラムにネストされたContainersを追加してください。フォーム作成についての詳細は、Ext JSにおけるフォームの構築を参照してください。
Grids
グリッドは、インタラクティブテーブル内でデータを表示します。Ext JSは、グリッドを作成する数種類のコンポーネントを提供しています。Grid Panel には、カラムのサイズ変更、並べ替え、グリッド内の別の場所へのドラッグなどのサポートが組み込まれています。Grid Panelもまた、水平方向へのスクロールや単数または複数の選択方法が行えます。また Ext JS では、グリッド値の、一セルずつ、または、一行まとめてのインライン編集をサポートするプラグイン( Cell Editing や Row Editing )を提供しています。
Architectのツールボックスは、グリッドコンポーネントを以下の３つのセクションに分類しています。
Grid Columns:アクション、ブーリアン、日付、数字そしてテンプレート化されたカラムを含むGrid Panel内で使用されているカラムの種類を選択できます。デフォルトでは、Grid Panelをプロジェクトへ追加したとき、グリッドには文字、数値、日付、ブーリアンが含まれています。
Grid Features:グリッド内のデータをグループ化、グループ内の合計や（全体の）合計を表示させる等の表示を変更するするプラグインです。
Grid Selection:セルの選択、チェックボックスによる選択、列による選択のモデル等の、グリッド内のデータ要素の選択方法を含みます。使用するモデルをグリッドパネルにドラッグして、有効化します。
Grid View:グリッドパネルのユーザーインターフェースをカプセル化したものです。デフォルトでは、Grid Viewが使用されています。
メニュー
メニューコンポーネントは、メニューを構築する際に使用されます。Ext JSではCheck Item、Color Menu、Date Menu、Menu Itemなどの、メニューを追加したり構成を設定できる標準的なメニューコンポーネントを提供しています。例えば、メニューバーを構築する場合、ButtonをStandard（以下Standard参照）の一覧のコンポーネントから選択し、それぞれのメニューをToolbar（Toolbar参照）へ追加し、それぞれのボタンごとにMenuコンポーネントを構築します。
Standard
スタンダードコンポーネントは、UI の基本的な構成要素で、Button、Progress Bar、Splitter、Tool などのコンポーネントがあります。Standardには、他の全てのコンポーネントの基礎となるExt.Componentを含んでいます。一般的にComponentsは直接は使用されません。 その代わりに、コンテナまたは他の専用のコンポーネントを使用します。
Toolbar
ツールバーは、Button Group、Fill、Separator、Spacerコンポーネントなど、ツールバーを構築する際に使用されるコンポーネントです。ツールバーを作成するには、Toolbarコンポーネントを追加し、コントロールコンポーネントをツールバーを追加します。ツールバーは一般的に、Panelコンテナへ追加されます。 Toolbarのflyoutの“Dock in parent”オプションを設定することによってパネルの端に結合することができます。
Tree
Treeコンポーネントを使用して、ツリーを構築します。 アプリケーション内でデータを階層的に一覧で表示し、開いたり、折りたたんだりすることができます。Ext JS における基本的なツリーの構成要素は、Tree Panel コンテナです。Tree Panelコンテナはルートノードと、無数のチャイルドノードで構成されます。Tree PanelはTreeStoreと紐づけられます。TreeStore のデータが変更されると、ツリーパネルにもそれが自動反映されます。
Views
コンポーネントはデータストアからの動的なデータを表示しています。XTemplateによりデータのフォーマットとレイアウトを完全に管理できます。Viewコンポーネントは、XTemplateを使用してデータのフォーマットと配置のために、Storeのデータを表示します。データのStoreが変更されると、自動的にUI上のデータも更新されます。ビューはクリックやマウスオーバーなどの一般的なアクションをサポートしており、単数選択や複数選択をサポートします。