ExtJS入門17 グリッド・パネル 基本編
いよいよグリッド・パネルをサンプルをやっていこうと思います。
まず基本として、ごくシンプルなグリッドパネルを作成します。
グリッド関連APIリファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanel
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel
ExtJS -3.0 日本語APIドキュメント – Ext.data.JsonStore
http://extdocs.xenophy.com/?class=Ext.data.JsonStore
ExtJS -3.0 日本語APIドキュメント – Ext.grid.ColumnModel
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel
グリッドパネルについて
グリッドパネルはスプレッドシートのような表を作るウィジェットで様々なデータを一覧表示させるのに便利です。ExtJSではExt.grid.GridPanelやExt.grid.EditorGridなどが用意されており、高機能なグリッドを作成することができます。
グリッドパネルの作るために必要な要素はデータソースと表示列(カラム)の設定です。
データソースはExtJSではストア(store)と呼ばれます。ストアはJSONやXML等のデータをExtJS内で保持するためのかたちです。
ストアに渡すデータはローカル変数でもリモートのAPIでも構いません。JsonStoreやXmlStoreを使えば簡単にJSON形式、XML形式のデータをストア格納できます。
表示列の設定は、ストアに格納しているデータをどのようなカラムでグリッドに表示するかを設定します。Ext.grid.ColumnModelクラスを使います。
簡単なグリッドであれば以上の2つをグリッドクラスのコンフィグに設定するだけで、あとはGridクラスがすべてやってくれます。
早速サンプルを紹介します。
シンプルなグリッドパネルのサンプル
・HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS名古屋勉強会 Gridの使い方 基本編</title> <!--Ext JS CSS--> <link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" /> <!--Ext JS--> <script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../js/ext/ext-all.js"></script> <script type="text/javascript" src="grid-basic.js"></script> </head> <body> </body> </html>
・Java Script
Ext.onReady(function(){
//1.データを用意
var data = [
{
id:1,
rank:1,
name:'IE',
percentage:62.69
},
{
id:2,
rank:2,
name:'Firefox',
percentage:24.61
},
{
id:3,
rank:3,
name:'Chrome',
percentage:4.63
},
{
id:4,
rank:4,
name:'Safari',
percentage:4.46
},
{
id:5,
rank:5,
name:'Opera',
percentage:2.40
},
{
id:6,
rank:6,
name:'Opera Mini',
percentage:0.53
}
];
//2.データストアを用意
var store = new Ext.data.JsonStore({
data:data,
fields:[
{name:'id'},
{name:'rank'},
{name:'name'},
{name:'percentage',type:'float'}
]
});
//3.カラムモデルを用意
var column = new Ext.grid.ColumnModel([
{
header:'順位',
sortable:true,
dataIndex:'rank',
width:50
},
{
header:'ブラウザ名',
sortable:true,
dataIndex:'name',
width:100
},
{
header:'シェア',
sortable:true,
dataIndex:'percentage',
width:80
},
{
header:'ID',
sortable:true,
dataIndex:'id',
width:20
}
]);
//4.グリッドパネルの作成
new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
id:'my-grid',
title:'初めてのグリッドパネル',
height:185,
width:260,
cm:column,
store:store
});
});
・実行結果
やることは4つです。
1.データの用意(今回はローカル変数として作成)
2.ストアの作成(データに合わせてJsonStoreを選択)
3.カラムモデルの作成
4.グリッドの作成
データ(data)はJSに直に書いています。なんとなく2009年12月のブラウザシェアにしています。今回はソートもできるのでpercentageという項目にシェアの割合を入れておきます。JSの配列なのでJSONです。これに対応するストアにJsonStoreを使えば簡単にストアを作成できます。
ストアはデータ(data)を元データとしてストアとして保持します。dataコンフィグはさっき作ったブラウザシェアデータ(JSON形式)を設定します。JSON形式のデータを読み込むのでJsonStoreクラスでストアを作ります。
fieldsコンフィグには元データの項目を設定します。ここで設定されない項目はストアに保持されないので必要な項目はすべて列挙しておく必要が有ります。今回はオブジェクトの配列を指定しています。nameには元データのJSONのプロパティ名をtypeは任意で、ソート等の機能を正しく使うときに指定します。今回はpercentageにだけfloatを設定しています。
typeの指定がない場合はfieldsは以下のように書くこともできます。
var store = new Ext.data.JsonStore({
data:data,
fields:[
'id',
'rank',
'name',
'percentage'
]
});
次にカラムモデルを作成します。カラムモデルはグリッドの列を決定します。Ext.grid.ColumModelクラスを使って作成します。設定はオブジェクト配列で今回は簡単に以下の4つを設定しました。
・header:列の見出し部分のテキスト
・sortable:ソート設定 真偽値で設定
・dataIndex:表示するデータのインデックス名
・width:列の幅指定
ストアとカラムモデルができれば、あとはこの2つをGridクラスに設定するだけです。
Ext.grid.GridPanelクラスを使います。cmにカラムモデルをstoreにストアをそれぞれ設定します。
これでシンプルなグリッドの完成です。
たったこれだけの設定にもかかわらず、各項目のソートや列をドラッグアンドドロップで並び換え、列の幅の変更ができるグリッドが完成します。
今回のグリッドのサンプルは数あるExtJSのグリッドの機能のうちほんの少しの機能しか使っていません。次回以降ExtJSのグリッドの様々な機能を使っていきます。



[...] ExtJS入門17 グリッド・パネル 基本編 ※時間があればここまで進みます [...]
Ext Japan - ブログ
19 2 月 10 at 1:12 AM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExtJS入門19 グリッドにページング機能を追加する | ExtJSで楽しくRIA業務アプリ開発
14 4 月 10 at 12:37 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExtJS入門20 グリッドにフィルタリング機能を追加する | ExtJSで楽しくRIA業務アプリ開発
15 4 月 10 at 11:50 AM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門23 グリッドへの項目の追加と削除 | ExtJSで楽しくRIA業務アプリ開発
20 4 月 10 at 12:28 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExtJSで楽しくRIA業務アプリ開発 ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存) | ExtJSで楽しくRIA業務アプリ開発
26 4 月 10 at 12:56 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門26 エディタブル・グリッド(色々なエディターを設定する) | ExtJSで楽しくRIA業務アプリ開発
27 4 月 10 at 12:42 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン | ExtJSで楽しくRIA業務アプリ開発
28 4 月 10 at 10:39 AM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門28 チェックボックス付きグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
30 4 月 10 at 12:44 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む | ExtJSで楽しくRIA業務アプリ開発
6 5 月 10 at 1:45 PM
[...] ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 [...]
ExJS入門30 Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
7 5 月 10 at 11:50 AM