Contents アプリケーションの説明事前準備プロジェクトの開始アプリケーションの命名プロジェクトの保存ウェブサーバーの起動コードの表示初期ビューの設定グリッドへのデータのロードグリッドビューの追加と設定データの処理:モデルとストアモデルの作成ストアの作成ストアにグリッドを結びつける詳細パネルへのグリッドの接続詳細パネルの追加詳細パネルの更新チャートの追加 ChartData のモデリングチャートの追加アプリケーションの実行このプロジェクトのファイル

デスクトップ端末向けのアプリケーションの構築

本ガイドでは、Sencha Architect を使用してデスクトップ端末のブラウザまたはタブレットで動作するウェブアプリケーションをビルドする方法を、手順を追って説明します。サンプルアプリケーションは Car Listings というもので、Ext JS 4.x フレームワークを使用します。

アプリケーションの説明

CarListings は、データバインディングの使用方法を説明する単純なアプリケーションです。完成したアプリケーションでは、ユーザーは車の写真を含んだ詳細を見るために、グリッドで車を選択します。このチュートリアルを終えれば、ビューの設定・構築、データのモデル化、データとビューの結びつきについて理解するでしょう。

事前準備

このガイドを使用する前に、下記の操作をします。

インストールと設定および保存、プレビュー、ビルドの説明に従って、Architect のダウンロード、インストールし、設定を行い、さらにウェブサーバーを設定してプロジェクト用のディレクトリをウェブサーバーに作成します。
CarListings example サンプルから、使用しているファイルシステムの適当な場所にデータファイルをダウンロードします。（アーカイブから例で使用する完全なプロジェクトソースをダウンロードできます。また、GitHubリポジトリを表示することができます。）

プロジェクトの開始

プロジェクトの開始手順は次のとおりです。

Architect を起動します。
[Create New（新規作成）] をクリックします。
[New Projects（プロジェクトの新規作成）] メニューで [Ext JS 4.2.x] フレームワークを選択します。
[Blank Project（空のプロジェクト）] を選択します。
[Create（作成）] をクリックします。

アプリケーションの命名

Architect プロジェクト作成の最初のステップは、アプリケーションに名前を付けることです。アプリケーションの名前は、[Save（保存）] メニューまたは [Project Inspector（プロジェクトインスペクタ）] で付けられます。このチュートリアルでは、[Project Inspector（プロジェクトインスペクタ）] を使用してコンフィグアイテムを検索（フィルタ）し値をセットする方法を学びます。

アプリケーションに名前を付ける手順は次のとおりです。

画面右上にある [Project Inspector（プロジェクトインスペクタ）] ウィンドウの最上部にある [Application（アプリケーション）] をクリックします。
[Ｃonfig（コンフィグ）] パネルで name を検索し、CarListings をセットします。

プロジェクトの保存

プロジェクトの保存には、ちょっとした事前準備が必要です。プロジェクトは、ウェブサーバーが公開するファイルを探すのと同じ場所に保存することが理想的です。このようにすると、ブラウザでプロジェクトを簡単にプレビューできます。ただし、利用するファイルの格納場所は、ウェブサーバーによって異なります。また、多くのウェブサーバーでは公開ディレクトリをシステム領域の中に設定しているので、その場合、ディレクトリを作成するにはルート権限が必要となります。このことは、Apache HTTP サーバーにも当てはまります。これは、~/Applications/XAMPP/ > htdocs ディレクトリにMac用のプロジェクトディレクトリを作成することが必要となる XAMPP の場合にも当てはまります。

規則は次のとおりです。使用しているウェブサーバーがシステムディレクトリ（たとえば Mac では Applications ディレクトリ、Windowsでは Program Files ディレクトリ）にインストールを行う場合、Architect プロジェクトの保存前にまずディレクトリを作成することが必要です。作成するディレクトリにはデフォルトの権限を付与できます。すなわち、所有者による読み取りおよび書き込み、グループその他による読み取り専用です。

Sencha Cmd ウェブサーバーもシステムディレクトリにインストールされますが、この点に関する動作は異なります。プロジェクトディレクトリは、ディレクトリ作成に特別な権限を必要としない Documents ディレクトリ内など、どこにでも作成できます。

プロジェクトを保存する前に、ウェブサーバーからアクセス可能な場所にプロジェクトファイルを保存するディレクトリを作成します。プロジェクトファイルディレクトリの場所は、ウェブサーバーによって異なります。たとえば、XAMPP を使用している場合には、htdocs ディレクトリの下位にプロジェクトを作成します。Sencha Cmd ウェブサーバーを使用している場合、プロジェクトを保存するプロジェクトディレクトリは、ツールバーの「保存」アイコンをクリックして保存できます。

表示されるボックスでプロジェクト名を入力します。Architect ではプロジェクトを保存するディレクトリの完全パス名を表示することに注意してください。この画面で、異なる保存先パスやアプリ名を指定することができます。

XAMPP のようなウェブサーバーを使用している場合、htdocs ディレクトリに移動し、保存先パスをそこに設定します。プロジェクト名は、保存先パスの下位にディレクトリを作成します。

Sencha Cmd のようなウェブサーバーを使用している場合、どのようなディレクトリでも使用できます。

注意：Architect では、Sencha Cmd をインストールしますが、Path 変数は設定しませんので、Sencha Cmd ウェブサーバーを使用するには Sencha Cmd を再インストールすることが必要です。これが Architect に影響を及ぼすことはありませんが、Sencha Cmd インストーラーにより Path が設定されます。

ウェブサーバーの起動

XAMPP や Apache のようなウェブサーバーを使用している場合、サーバーをそのコントロールツールから起動します。

Sencha Cmd ウェブサーバーを使用している場合、コマンドラインを開いて、プロジェクトを保存している場所にディレクトリを変更します。sencha web start コマンドを使用してウェブサーバーを起動します。コマンドラインウィンドウでウェブサーバーが継続的に実行されます。サーバーを停止するには、 CTRL+c を押すか、別のウィンドウを開いて sencha web stop コマンドを入力します。

コードの表示

コードはいつでも Architect で表示できます。グラフィカルなデザインキャンバスをコードエディタに切り替えるには、メインパネルの右上にある「Design」「Code」トグルボタンを使います。

初期ビューの設定

プロジェクトにパネルコンポーネントを追加します。Containers カテゴリをツールバーで探し、Panel をアプリケーション中央にあるキャンバスにドラッグします。
初期ビュー - パネルの作成が済むと、プロジェクトインスペクタの Views ノードの下に MyPanel が表示されます。初期ビューインジケータは右側に表示されます。その上にカーソルを置くと、「This component is your Initial View」と表示されるはずです。これは、アプリケーション実行時に最初に表示されることを意味します。initialView コンフィグは [Config （コンフィグ）] パネルでもチェックされます。アプリケーションは初期ビューを１つ持つことができます。
プロジェクトを再度保存します。
ツールバーの [Preview（プレビュー）] ボタンをクリックして、プロジェクトをプレビューします。
Sencha Cmd ウェブサーバーを使用している場合、URL プレフィックス を http://localhost:1841/ というアドレスに設定します。

[Preview（プレビュー）] ボタンをクリックすると、プロジェクトに追加された単一のパネルを表示するブラウザウィンドウが起動します。

グリッドへのデータのロード

パネルにグリッドを追加し、次のセクションの説明に従ってデータをロードしてみましょう。

チュートリアルを通して、あなたはいつでもプロジェクトのコードを参照することができます。キャンバス、またはプロジェクトインスペクタでコンポーネントを選択し、キャンバスの右上にある「Design」と「Code」の切り替え機能を使用して Design ビューと Code ビューを切り替えます。

グリッドビューの追加と設定

パネルのタイトルをダブルクリックして、Car Listing に変更します。
Config パネルでチェックボックスをチェックし、frame コンフィグを true に変更します。
パネルを選択して、Flyout Config ボタン（右上のギア）をクリックします。layoutをvboxに設定します。この設定によって、Panelの子コンポーネントは垂直に配置されます。
ツールバーの「Grids」カテゴリから Grid Panel をドラッグし、キャンバスの Panel コンテナにドロップします。「vbox」はレイアウトです。最上位レベルの View コンポーネント（ここではパネル）にレイアウトを設定してサブコンポーネントの配置方法をコントロールします。
キャンバス、またはインスペクタでグリッドを選択し、Configパネルのtitle設定でクリアアイコン（x）をクリックしてグリッドからタイトルバーを削除します。
最上位レベルのパネルの userClassName 設定を MyPanel から CarListings に変更します。これにより [Project Inspector（プロジェクトインスペクタ）] での名前が変更されます。また、基礎となるソースコードのExt.defineで生成されたJavaScriptクラスの名前を変更されます。

上記手順を適切に実行している場合、このような表示になるはずです。

注意:ここで vbox レイアウトを使用したのは、垂直スタックにさらにパネルを追加したいからです。上記の例だけなら、frame 設定を true に設定した単一の Grid Panel だけでも作成可能です。大規模なアプリケーションで過度のネストをすると、パフォーマンスの問題を引き起こす可能性がありますので、必要な場合を除き、ネストコンテナにしないように注意してください。

データの処理:モデルとストア

ここでアプリケーションをプレビューすると、データもデフォルトの列ヘッダー（文字列、数値、日付、真偽）もない、空のグリッドが表示されるはずです。これは、データストアにグリッドをバインドしていないためです。グリッドと新しいストアをバインドして、いくつかのスポーツカーに関する情報をロードしましょう。データパッケージの詳細については、Ext JS Dataのガイドを参照してください。

プロジェクトディレクトリにデータファイルをダウンロードし、解凍します。データフォルダは CarListings.xds ファイルと同じレベルにあることが必要です。

アプリケーションのフォルダ構造は次のようになります。

CarListings/
|____app/
| |____view/
| | |____CarListings.js
| | |____Main.js
| | |____Viewport.js
|____app.js
|____app.json
...
|____CarListings.xds
|____data/
| |____2004_Porsche_911_Carrera_type_997.jpg
| |____250px-2007_Audi_TT_Coupe.jpg
| |____250px-Audi_S5.jpg
| |____250px-BMW_M3_E92.jpg
| |____250px-Nissan_GT-R.jpg
| |____cars.json
...
|____index.html
|____metadata/
| |____Application
| |____resource/
| | |____Library
| | |____MyNeptuneTheme
| |____view/
| | |____CarListings
...

プレーンテキストエディタで cars.json ファイルを開くと、データ形式やキーと値のペアを見ることができます。では、Porsche 911 のエントリを細かく見てみましょう（見やすくするために折り返し処理をしてあります）。

{
    data: [{
        manufacturer: 'Porsche',
        model: '911',
        price: 135000,
        wiki: 'http://en.wikipedia.org/wiki/Porsche_997',
        img: '2004_Porsche_911_Carrera_type_997.jpg',
        quality: 
          [{name: 'overall', rating:1}, 
          {name: 'mechanical', rating: 4}, 
          {name: 'powertrain', rating: 2}, 
          {name: 'body', rating: 4},
          {name: 'interior', rating: 3},
          {name: 'accessories', rating: 2}]
    },{
        ...
    }]
}

.json ファイルを IIS で公開するには、JSON MIME タイプを手作業で設定しなければならないことに注意してください。手順については、インストールと設定ガイドを参照してください。

次に、Architect でこのデータを表すモデルを作成します。

モデルの作成

知りたい自動車のエンティティに関する適切なフィールド（キー）を使用して、モデルを作成します。

[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン（「+」）をクリックし、[Model（モデル）] をクリックします。[Project Inspector（プロジェクトインスペクタ）] の Models ノードに MyModel という名前の新しいモデルが表示されます。
新しく作成したモデルを選択し、userClassName コンフィグに CarData をセットします。
[Config（コンフィグ）] パネルで fields を検索します。追加ボタン（「+」）をクリックし、「Enter one or more field names（１つ以上のフィールド名を入力してください）」と求められたら、フィールド名を「manufacturer, model, price, wiki, img, quality」のようにカンマで区切って入力します。[Finish（終了）] をクリックするか、Enter を押します。

上記手順を適切に実行している場合、フィールドは次のようになります。

ストアの作成

データ構造を表すモデルができたので、この CarData モデルを使用してストアを作成できます。

[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン (「+」) をクリックし、Store のサブメニューで Json Store を選択します。新しいストア「MyJsonStore」が作成されます。インスペクタのStoresノード下に表示されます。

注意：JsonStoreは自動的にJsonReaderを追加し、JSON形式でデータのロードを行うと仮定するでしょう。XML や Array といったその他のフォーマットもサポートしていますが、Yelp では JSON を使用しているので、これに倣っています。

[Project Inspector（プロジェクトインスペクタ）] の新しく作られたストアの右側に、ストアの設定に問題があることを示す警告アイコンが表示されます。このアイコンをクリックすると、設定が無効である理由についてのより詳細な情報が表示されます。

[Project Inspector（プロジェクトインスペクタ）] でストアを選択し、**model** コンフィグを CarData に設定します。これで警告アイコンが消えます。MyAjaxProxy に対する警告には、手順 5 で対処します。
ストアを選択し、**userClassName** 設定に CarDataStore をセットします。[Project Inspector（プロジェクトインスペクタ）] 内のストアの名前が更新されます。
CarDataStore の下にある AjaxProxy を選択し、**url** に data/cars.json をセットします。このURLは、プロジェクトの相対位置であることに注意してください。URL接頭辞は、Architect内でデータをロードするために適切に設定する必要があります。
CarDataStore を右クリックし、Load Data をクリックします。データをロードしたら、ストアの隣に目のアイコンが次のように表示されます。

注意:コンテキストメニューの Load Data 機能はプロキシの url 設定またはストアの data 設定が行われると有効化されます。

目のアイコンにカーソルを合わせると、ストアにロードされたレコードの数が表示されます。１つのレコードだけがロードされたことに注意してください。何か手違いがあるようです。

レスポンスデータを参照するために、目のアイコンをクリックします。レスポンスデータを見ると、個々のエンティティはdata配列の範囲内であることが確認できます。これが１レコードしかロードされなかった理由です。インスペクタでMyJsonReaderを選択し、root設定をdataに設定します。これでストアが正しく設定されました。

再度、CarDataStore を右クリックし、Load Data をクリックします。データのロードに影響を与えると思われるストアの設定を変更したため、Architect ではデータキャッシュをクリアしています。
最後に、プログラムでロードする必要がないように、**autoLoad**設定にチェックを入れてtrueに設定します。

ストアにグリッドを結びつける

次に、グリッドにストアを結びつけます。グリッドがストアと結びつけられると、いつストアのレコードに更新があっても、グリッドは変更を反映させるために自動的に自身をアップデートします。さらに、ストアで任意のレコードの追加、または削除が行われた場合もまた、グリッドに反映されます。

インスペクタでGrid Panelを選択してください。その store 設定に CarDataStore をセットします。マッピングがまだ設定されていないため、すべてのデータが非表示になっていることに注意してください。
[Project Inspector（プロジェクトインスペクタ）] のグリッドパネルを右クリックし、「Auto Columns」を選択します。これにより、関連づけられたモデル（またはストア）のデータフィールドとグリッドのカラムを 1 対 1 で自動的にマッピングします。

上記手順を適切に実行している場合、次のような表示になるはずです。

アプリケーションを保存し、[Preview（プレビュー）] をクリックします。ブラウザでグリッドとデータを見ることができます。

ブラウザで、スクリーンが空白であったり、グリッドが空白であったりする場合は、次の点を確認してください。

ブラウザのJavaScriptコンソールでエラーが表示されない
Architect Log と画面下部の [Output（出力）] エリアにエラーが表示されない
ストアの autoLoad コンフィグが設定されている

これで、CarListingsアプリケーションを構築する最初の主要なステップを完了しました。

詳細パネルへのグリッドの接続

次に、ユーザーが個々のレコードを選択すると、グリッド内の各エントリに関する追加情報を表示されるようにするために、詳細パネルを追加します。

詳細パネルの追加

最上位のCarListings Panelを選択します。詳細パネルを収容できる大きさにするために、パネルの下の境界をドラッグして Panel のサイズを変更します。約 2 倍の高さにしてください。

CarListing パネルを選択中の状態で、ツールボックスで「panel」を検索します。「Panel」をダブルクリックすると、[Project Inspector（プロジェクトインスペクタ）] で現在選択中の項目に新しいパネルが追加されます。これはドラッグ＆ドロップの代替でより速いコンポーネントの追加方法です。

新しく追加されたPanelを選択します。**tpl**設定を検索し、その右側にある追加ボタン (“+”) をクリックします。すべてのコンポーネントがXTemplateを受け入れる**tpl**設定を持っています。テンプレートライブラリに関する詳細を知るには、XTemplate リファレンスを参照してください。

tpl設定を追加したら、右にある右向き矢印のアイコンをクリックし、センターステージでコードエディタを開きます。コードエディタで以下のテンプレートを貼り付けます。
<img src="data/{img}" style="float: right" />
Manufacturer: {manufacturer}
Model: <a href="{wiki}" target="_blank">{model}</a><br/> Price: {price:usMoney}

名前の入った中括弧は、CarDataModelのフィールドに対応する便利な変数を表します。適切に上記手順を実行した場合、Designビューは下記のようになっているはずです。

注意:この手順は、順序が重要です。コンテナの**レイアウト**が vbox または hbox に設定されている場合、新たに追加された子アイテムの flex 設定には、自動的に 1 が設定されます。レイアウトを vbox に設定する前に子アイテムを追加する場合、手動で各子アイテムの flex 値に 1 を設定する必要があります。

詳細パネルの更新

Event Bindings によって、２つのパネルを結合するコードを追加してみましょう。ユーザーがグリッド内の特定のエントリを選択したときに、設定したテンプレートを使用して、その下にある詳細パネルで詳細情報を表示するアプリケーションにしたいと思います。

最後に追加したパネル（テンプレート付きのパネル）を選択し、itemId設定にdetailPanelを設定します。これにより、アプリケーションはCarListingsクラス内で簡単に特定のパネルへの参照を取得することができます。
プロジェクトインスペクタからグリッドパネルを選択し、Event Bindings設定を検索し、右側にある追加ボタン (“+”) をクリックします。selectイベントを選択し、[Finish]をクリックするかEnterキーを押します。

新しいイベントバインディングを選択するには、矢印アイコンをクリックします。新しい関数には、意味のあるメソッド名が自動的に生成されますが、必要があれば、**fn** コンフィグを使って好きな名前に変更することができます。
イベントハンドラのコードビューを表示するために、プロジェクトインスペクタでイベントバインディングをダブルクリックします。書かなければならないのはメソッド本体だけだということに注意してください。関数の引数は、すでに定義されています。

イベントハンドラに次のコードを貼り付けます。

// grab a reference to the detailPanel via itemId
// the # in front of the id indicates that we would like to grab a reference by
var detailPanel = this.child('#detailPanel');
// update the detailPanel with data
// this will trigger the tpl to become updates
detailPanel.update(record.data);

注意：イベントバインディングは、自身が定義されているクラスのコンテキストにおいて実行されます。this. は最上位レベルのパネルを参照します。

注意：いくつかの*非常にまれな*例外で、this.は最上位クラスの参照ではないことがあります。たとえば、Sencha Touchフレームワークをターゲットとするプロジェクトにおいて、特定のコンテナ内のコンポーネントに、initialize や painted のようなイベントハンドラを追加する場合です。

重要：detailPanel に識別子を提供する際、id コンフィグではなく itemId コンフィグを使用していることに注意してください。itemId設定はコンテナの中では一意である必要がありますが、グローバル空間においては制限がありません。一方、id設定はグローバル空間で一意である必要があります。id コンフィグを使用する場合、同時に保持できる特定コンポーネントのインスタンスは１つだけです。Architectは、コード再利用、およびインスタンスのリンクのような高度な機能を介して、コンポーネントの複数インスタンスを使用することを促進します。

プロジェクトを保存し、ブラウザでプレビューします。グリッドで特定のレコードを選択すると、追加情報が下のパネルに表示されるはずです。

チャートの追加

このプロジェクトの最終工程を開始するために、選択した車の品質を表示するチャートを追加します。

ChartData のモデリング

[Project Inspector（プロジェクトインスペクタ）] に 2 つ目のモデルを追加します。**userClassName**設定にCarChartをセットします。

下記に示すような、qualityフィールドの内容を調べましょう。quality フィールドは既に cars.json から CarStore にロード済みです。ここでは、チャート用のコンテンツを保持するモデルを追加作成します。

"quality" : [{
    "name" : "overall",
    "rating" : 1
},{
    "name" : "mechanical",
    "rating" : 4
},{
    "name" : "powertrain",
    "rating" : 2
},{
    "name" : "body",
    "rating" : 4
},{
    "name" : "interior",
    "rating" : 3
},{
    "name" : "accessories",
    "rating" : 2
}]

[Config（コンフィグ）] パネルで、CarChart モデルに quality フィールドで定義されているそれぞれのキーに直接マップする 2 つのフィールドを追加します。モデルに name と rating という名前のフィールドを作成します。これらのフィールドは cars.json に直接マップします。
ストアを選択し、**userClassName** 設定に CarChartStore をセットします。サブメニューの Store を直接クリックすると、プロキシやリーダーのないプレーンなストアが作成されます。

ストアの model コンフィグに CarChart モデルを設定して、CarChart モデルを CarChartStore にリンクします。

チャートの追加

チャートを追加しても収まるように、必要であればCarListingsパネルのサイズを変更します。
CarListingsパネルに追加のパネルをドラッグします。パネルのタイトル、またはインスペクタのViewsノードにドロップします。グリッドは最上位のパネルのサイズに拡大されているため、センターにこれをドロップすることはできません。他の方法としては、最上位のパネルを選択した状態で、ツールボックスのPanelをダブルクリックします。
3番目のパネル上（キャンバス上で一番下にある、最後に追加したパネル）にColumn Chartをドラッグします。
[Project Inspector（プロジェクトインスペクタ）] で新しく作成されたパネルを選択し、キャンバスで Flyout Config ボタン（右上のギア）をクリックして、レイアウトを fit に設定します。これにより、親パネルに収まるようにチャートが両方向へ伸ばされます。
真ん中と下のパネルのtitle設定をクリアします。
真ん中と下のパネルに、パネル周りの余白を追加します。真ん中のパネル（detailPanel）を選択し、フィルターフィールドで「margins」と入力します。**margin**に5 0 0 0と設定します。（設定するのは Ext.layout.VBoxLayout の margins 設定であり、Ext.Abstract.Component の margins 設定では*ない*ことに注意してください。）同じマージンを下のパネル（chartPanel）にも追加します。
キャンバスで、チャートの Flyout Config ボタンをクリックし、CarChartStore を選択して Chart コンポーネントと JSON ストアを結びつけます。

注意:この操作でチャートが表示されなくなりますが、この時点ではこれでかまいません。ユーザーがレコードを選択したときに表示されることが大事です。

[Project Inspector（プロジェクトインスペクタ）] のチャートで Category Axis を選択し、チャートの x 軸を編集します。この Category Axis では CarListing アプリの車の品質のカテゴリを表示します。次の変更を行います。
- title 設定を Quality に変更します。
- fields 設定を x から name に変更します。nameフィールドは、チャートのX軸にqualityカテゴリの値を提供します。
インスペクタのchart下でNumeric Axisを選択し、チャートのY軸を編集します。この Numeric Axis は、各車の quality カテゴリの値を表示します。次の変更を行います。

title 設定を Score に変更します。
fields 設定を y から rating に変更します。この設定により軸上に描画されるものが決まりますが、実際に描画されたチャートのカラムには影響しません。
Y軸の最大値となるmaximum設定の値を5に変更します。
Y軸の最小値となるminimum設定の値を0に変更します。これは、Y 軸の値を、データの最小値ではなく、0から始まるようにするための、重要な設定です。
majorTickSteps 設定の値を 4 に変更します。これは最小値と最大値の間にいくつマーカーを設置するかを決定します。

[Project Inspector（プロジェクトインスペクタ）] のチャートで MyColumnSeries を選択します。Configパネルでlabel設定を検索し、下記のように変更します。
{ display: ‘insideEnd’, field: ‘rating’, color: ‘#333’, ‘text-anchor’: ‘middle’ }

注意：キー text-anchor を引用符で囲ったのは、キー名に - が使用されているためです。

MyColumnSeries に次の変更を追加します。これらの設定はチャートのシリーズとしてレンダリングされる実際のカラムを決定します。
- xField 設定を name に変更します。
- yField 設定を rating に変更します。
コードからチャートにアクセスできるように、チャートの itemId 設定を qualityChart に設定します。
ユーザーがレコードを選択したときにチャートのストアを更新する以下のコードを、onGridpanelSelect（このチュートリアルで以前に追加したイベントハンドラ）に追加します。
// grab a reference to the qualityChart, notice we use down here instead of child // because down will go down the container hierarchy at any depth and child // only retrieves direct children var chart = this.down(‘#qualityChart’); // get the quality field out of this record var qualityData = record.get(‘quality’); chart.store.loadData(qualityData);

Ext JS のチャート API に関する詳細については、Ext.chart.CartesianChart リファレンスページを参照してください。

アプリケーションの実行

ブラウザで実行中のアプリケーションを見てみましょう。

プロジェクトの初回保存時に、Architect ではこのプロジェクトの実行に必要なファイル（.html および .js ファイル、ならびにコントローラ、モデル、ストア、ビューの .js ファイルなど）をプロジェクトの初回保存時に示されるディレクトリにすべて格納します。ビルドするたびに、格納したすべてのファイルが Architect によって自動更新されます。

最終的なアプリケーションを表示するには、ブラウザを起動するか、単に Preview をクリックします。そうすれば、アプリケーション UI が表示されるはずです。グリッドの行をクリックすると、車の詳細は車の画像と、車のさまざまなカテゴリの品質データを示すチャートとともに表示されるはずです。

このプロジェクトのファイル

Last updated

12月 18, 2014

Architect Guides

デスクトップ端末向けのアプリケーションの構築

アプリケーションの説明

事前準備

プロジェクトの開始

アプリケーションの命名

プロジェクトの保存

ウェブサーバーの起動

コードの表示

初期ビューの設定

グリッドへのデータのロード

グリッドビューの追加と設定

データの処理:モデルとストア

モデルの作成

ストアの作成

ストアにグリッドを結びつける

詳細パネルへのグリッドの接続

詳細パネルの追加

詳細パネルの更新

チャートの追加

ChartData のモデリング

チャートの追加

アプリケーションの実行

このプロジェクトのファイル