Ext.grid.Panel は Ext JS の中核です。それは信じられないほど多様なコンポーネントであり、ソート、グループ化、および編集を提供します。
基本的なグリッドパネル
基礎的な Ext.grid.Panel の作成から始めましょう。ここでは、簡単なグリッドを起動して実行するために知っておくことを説明します。
モデルとストア
Ext.grid.Panel とは、Ext.data.Store に格納されているデータを表示するコンポーネントに過ぎません。Ext.data.Store はレコードのコレクション、あるいは Ext.data.Model インスタンスと見なすことができます。
このセットアップの利点は問題点を分離することです。Ext.grid.Panel は、データの表示にのみ関係しますが、Ext.data.Storeは、Ext.data.proxy.Proxy を使用してデータの取得や保存に関係します。
最初に定義する必要があるのが Ext.data.Model です。モデルとは、あるタイプのデータを表すフィールドのコレクションに過ぎません。“User”を表すモデルを定義してみましょう:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});次に、User のインスタンスをいくつか含む Ext.data.Store を作成してみましょう。
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
{ name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
{ name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
{ name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
]
});わかりやすくするために、Ext.data.Store を設定して、データをインラインでロードしました。実際のアプリケーションでは、Ext.data.Store は、Ext.data.proxy.Proxy を使用してサーバーからデータをロードするように設定されている可能性が高いです。
グリッドパネル
これで、データ構造を定義するモデルが用意できました。また、いくつかのモデルインスタンスを Ext.data.Store にロードしました。これで、Ext.grid.Panel を使用してデータを表示する準備ができました。
この例では、グリッドに renderTo を設定して、HTML ドキュメントにグリッドをすぐにレンダリングします。
多くの場合、グリッドは Ext.container.Viewport の親にあたり、これはレンダリングがすでに処理されていることを意味します。
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});これらがすべてです。
ボディ要素にそれ自体をレンダリングする Ext.grid.Panel を作成しました。また、すでに作成された userStore からデータを取得するようにグリッドパネルに指示しました。
最後に、グリッドパネルのカラムを定義し、dataIndex プロパティを与えました。dataIndex はモデルからカラムにフィールドを関連付けます。
Name カラムには固定幅 100px があり、並び替えと非表示は無効になっています。Email Address カラムをデフォルトで非表示に設定しています（これは他のカラムのメニューを使用して再表示できます）。最後に、Phone Number カラムはグリッドパネルの合計幅の残りに合わせる柔軟性があります。
このコードの全体は、配列グリッド例を参照してください。
レンダラー
データの表示方法を変更するには column コンフィグの renderer プロパティを使用できます。レンダラーは、基底になる値を変更し、表示する新しい値を返す関数です。最も一般的なレンダラーのいくつかは Ext.util.Format に含まれます。 ただ、カスタマで記述することもできます。
columns: [
{
text: 'Birth Date',
dataIndex: 'birthDate',
// format the date using a renderer from the Ext.util.Format class
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
{
text: 'Email Address',
dataIndex: 'email',
// format the email address using a custom renderer
renderer: function(value) {
return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
}
}
]カスタムレンダラー使用のライブデモはキッチンシンクの配列グリッドを参照してください。
グループ化
行をグループに整理するのは簡単です。最初に、ストアで Ext.data.Store#groupField プロパティを選択します。
Ext.create('Ext.data.Store', {
model: 'Employee',
data: ...,
groupField: 'department'
});次に、Ext.grid.feature.Feature でグリッドを設定します。これは、グループで列の表示を処理します。
Ext.create('Ext.grid.Panel', {
...
features: [{ ftype: 'grouping' }]
});実際の例は、キッチンシンクのグリッドパネルのグループ化を参照してください。
選択モデル
グリッドパネルはデータ表示だけでも使用できます。ところが、往々にしてグリッドのデータを操作する必要があります。すべてのグリッドパネルには Ext.selection.Model があり、データがどのように選択されるかを決定します。選択モデルの2つの主要なタイプは、すべての行を選択する Ext.selection.RowModel とそれぞれのセルを選択する Ext.selection.CellModel です。
グリッドパネルはデフォルトで Ext.selection.RowModel を使用しますが、Ext.selection.CellModel に簡単に切り替えられます。
Ext.create('Ext.grid.Panel', {
selType: 'cellmodel',
store: ...
});Ext.selection.CellModel を使用するといくつかの動作が変化します。最初に、セルをクリックすると行全体ではなくそのセルだけを選択します。第2に、キーボードのナビゲーションは行から行ではなくセルからセルに移動します。セルベースの選択モデルは、通常は編集時に使用されています。
編集
グリッドパネルは、編集サポート機能がビルトインされています。2つのメイン編集モードである行の編集とセルの編集を見ていきましょう。
セルの編集
セルの編集を使用すると、グリッドパネルで、データは一度に1つのセルずつ編集できるようになります。セルの編集を実装する最初のステップは、編集可能になっているグリッドパネルで、それぞれの Ext.grid.column.Column にエディタを設定することです。これは、Ext.grid.column.Column#editor コンフィグを使用して実行します。最も簡単な方法は、エディタとして使用したいフィールドにxtypeを指定することです:
Ext.create('Ext.grid.Panel', {
...
columns: [
{
text: 'Email Address',
dataIndex: 'email',
editor: 'textfield'
}
]
});エディタフィールドの動作をもっとコントロールする必要がある場合、Ext.grid.column.Column#editor コンフィグには、フィールドのコンフィグオブジェクトも設定できます。例えば、Ext.form.field.Text を使用していて、値が必要な場合:
columns: [
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
[エディタフィールドとしてExt.form.field パッケージの任意のクラスを使用することができます。日付を含む列を編集する場合を考えてみましょう。Ext.form.field.Date エディタを使用できます。
columns: [
{
text: 'Birth Date',
dataIndex: 'birthDate',
editor: 'datefield'
}
]Ext.grid.PanelのExt.grid.column.Column は、Ext.grid.column.Column#editor が設定されていないと、編集可能になりません。
編集可能にする列を設定し、データを編集するために使用されるエディタフィールド、次のステップは、選択モデルを指定することです。Ext.grid.Panel コンフィグでExt.selection.CellModel を使用してみましょう。
Ext.create('Ext.grid.Panel', {
...
selType: 'cellmodel'
});最後に、編集可能にするために、Ext.grid.Panel に Ext.grid.plugin.CellEditing を設定する必要があります。
Ext.create('Ext.grid.Panel', {
...
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});セルの編集を使用した、編集可能なグリッドの作成はこれで終わりです。セルの編集作業の例については セルの編集 を参照してください。
行の編集
行の編集では、セルタイプで編集するよりも、一度に行全体を編集することができます。行編集はセルの編集と全く同じように動作します。 必要があるのは、selType を rowmodel へプラグインタイプを Ext.grid.plugin.RowEditing へ変更することです。
Ext.create('Ext.grid.Panel', {
...
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
]
});
セルの編集作業の例については行の編集を参照してください。
ページング
時にはデータセットは、1つのページにすべてを表示するには大きすぎることがあります。Ext.grid.Panel は、[Previous/Next（前/次）] ボタンを使用してページをロードする Ext.toolbar.Paging を使用して、データセットからの個別のページ表示をサポートします。
ストアの設定
Ext.grid.Panel でページングを設定する前に、ページングをサポートするように Ext.data.Store を設定することが必要です。以下の例では、Ext.data.Store#pageSize を Ext.data.Store に加え、Ext.data.reader.Reader#totalProperty で Ext.data.reader.Reader を設定します。
Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});Ext.data.reader.Reader#totalProperty コンフィグはどこから JSON レスポンスの結果の総数を取得するかを Ext.data.reader.Json に指示します。Ext.data.Store は以下のような JSON レスポンスを消費するように設定されます。
{
"success": true,
"total": 12,
"users": [
{ "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
{ "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
{ "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
{ "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
]
}ページングツールバー
これで、Ext.data.Store はページングをサポートするように設定されました。後は、Ext.toolbar.Paging を設定するだけです。Ext.toolbar.Paging はアプリケーションレイアウトのどこにでも配置できますが、通常は、Ext.grid.Panel にドッキングされています。
Ext.create('Ext.grid.Panel', {
store: userStore,
columns: ...,
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});
実際の例についてはページンググリッドを参照してください。
バッファリングされたレンダリング
グリッドは、非常に大量のデータセットの場合、ページングツールバーを使用する代わりに、バッファリングされたレンダリングをサポートします。画面上のすべてのレコードをパフォーマンスを犠牲にすることなくユーザーが一度に何千ものレコードをスクロールすることができます。グリッドはpageSizeを指定して制限されるべきです。
バッファリングされたレンダリングを使用するには、グリッドにbufferedrendererプラグインを設定します。ストアは非常に大量のデータセットがすべてロードされる可能性があります。
どちら側にもほとんど（Ext.grid.plugin.BufferedRenderer#leadingBufferZone）オーバーフローがないように設定されたグリッドの表示領域にちょうど必要な列だけがレンダリングされて、スクロールできるようにします。スクロールすると、新しい行がスクロール方向にレンダリングされ、テーブルの後退側の行が削除されます。
Ext.create('Ext.grid.Panel', {
// Use a BufferedRenderer plugin
plugins: {
ptype: 'bufferedrenderer'
},
// Configure the rest as usual
...
});実際の例についてはバッファリングされたレンダリングを参照してください。