Sencha TouchGrid は Sencha Touch プロジェクトに使用できる一連のグリッドです。TouchGrid を使用するには、Sencha Touch Bundle または Sencha Complete のいずれかのライセンスが必要です。TouchGrid では Touch Grid および Ext Grid Column のクラスとサブクラスを公開しています。
TouchGrid のインストール
使用している Touch Bundle または Complete のソフトウェア配布に含まれる TouchGrid の sencha-touch-grid.aux ファイルを探します。
Architect でエクステンションの追加アイコンをクリックするか、[File（ファイル）] > [Install User Extension（ユーザーエクステンションのインストール）] を選択します。
[Open File（ファイルを開く）] ウィンドウで、使用している Touch Bundle または Complete のソフトウェア配布に含まれる TouchGrid の sencha-touch-grid.aux ファイルの場所を開き、[Open（開く）] をクリックします。TouchGrid エクステンションによりツールボックスがインストールされ、読み込まれます。
インストールすると、ツールボックスは次のように表示されます。
ユーザーエクステンションに関する詳細は、ユーザーエクステンションの組み込みを参照してください。
TouchGrid の使用
Touch 用の Touch Bundle または Complete ソフトウェア配布の中から次のパスを検索すると、TouchGrid の使用例があります。
<配布ルート>/touch-2.n.n/packages/sencha-touch-grid/examples
Architect で次の操作を行います。
- Touch Grid コンポーネントをツールボックスからキャンバスにドラッグします。ExtJS グリッドの場合と同様に、Touch Grid でも説明のために各行のサンプルデータを一覧表示します。これは、実際のデータストアを追加してグリッドに割り当てると、自動的に置換されます。
- 必要に応じて列をドラッグします。ドラッグ後に列が表示されない場合、キャンバスの最下部にある方向ボタンをクリックするか、より大きなデバイスサイズを選択すると、列が表示されます。
- コンポーネントをグリッドに追加したら、必要に応じてコンフィグプロパティを設定します。
コーディングされたアプリの一般的なフローには要素が次の順番で含まれます。
Ext.application関数でアプリケーションを起動します。- アプリケーションのターゲットデバイスに応じて起動画像を指定します。
- ターゲットデバイスに応じてアイコンのサイズを指定します。
- アプリケーションで使用するクラスを特定するため、
requires文を指定します。 - ブラウザの準備が整ったら、
launch関数を呼び出してデータソースを起動します。 - サーバーからのデータ取得をデータストアとして行います。
- グリッドのフィールドを特定します。
- グリッドを作成します。
- 最後に、
Ext.Viewport.add(grid)関数を使用してグリッドを表示します。
注意
- TouchGrid ではデフォルトで
sortable:'true'を有効化します。これにより、ユーザーが列のヘッダーをクリックすると、その列を基準にしてテーブルをソートできます。 - Architect では TouchGrid に必要な
requires文をプロジェクトのapp.jsonファイルに自動的に追加します。 - Architect における TouchGrid 実装用のコンポーネント名は、TouchGrid API の
xtypeの値に密接にマッピングされます。