まず、ExtJS javascriptライブラリを
ダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080428時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。gridのサンプルは
ココからも見れます。
【パス】
ext-2.1\examples\grid\array-grid.html
このウィジェットがgridと呼ばれるものです。エクセルのような罫線で表現されたウィジェットで、
- ソート
- 各セルの編集
- グルーピング
- サマリ
- フィルタ
なんかも出来ます。すごいですね。今日はこのgridの基本的な実装を解説してみたいと思います。あと、いきなりgirdとか言われても・・と言う方には
ここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するgridのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。
動作サンプルとサンプルソース
Ext.onReady( function(){
var store = new Ext.data.SimpleStore({
fields: [
{ name: 'a' },
{ name: 'b' }
],
data:[
[ 'hoge', 1 ],
[ 'moge', 2 ],
[ 'fuga', 3 ]
]
});
var clmnModel = new Ext.grid.ColumnModel([
{ header: "title", width: 200, dataIndex: 'a' },
{ header: "number", width: 100, sortable: true, dataIndex: 'b' }
]);
var grid = new Ext.grid.GridPanel({
store:store,
colModel:clmnModel,
renderTo:'renderTarget',
title:'simple-grid',
stripeRows:true,
height:150,
width:316,
frame:true
});
});
【Ext.grid.GridPanelの解説】
それではgirdを見ていきたいと思います。
var grid = new Ext.grid.GridPanel({
という箇所がグリッドそのものになります。この定義の仕方は、これからたくさん出てくるので先に解説してしまいます。
Ext.grid.GridPanel({});の{}定義体はオブジェクトリテラルと呼ばれるもので、ExtJSではこの書式で実装していくことがほとんどです。使ってみればそんなに難しいものでは無く、
オブジェクトリテラルとは
- 中カッコ{}で囲まれて、
- カンマ,を使ってプロパティが区切られて定義されるもの
だと理解すればいいのではないかと思います。多分乱暴に色々切り捨てた言い方をしたのかもしれませんが、ワタシはそう理解しています。
そしてこのオブジェクトリテラルのプロパティ１つ１つを、ExtJSではコンフィグオプションと呼んでいます。
Ext.grid.GridPanel({ /* コンフィグオプション群 */ })
このコンフィグオプションによって、いろんな表示設定や、機能設定が出来るようになっています。
サンプルソースのgridのコンフィグオプションを上から見ていくと、
store / colModel / renderTo / title / stripeRows / height / width / frame とありまして、このほかにも様々なコンフィグオプションがありますが、GridPanelで必須とされるのは store と colModel になります。ただ、renderToで表示先を指定してあげないと、このサンプルソースではgridが表示されませんので、このstore / colModel / renderTo以外をコメントアウトしたりしてどんなコンフィグなのか試してみるといいかもしれません。
それではこのコンフィグを解説していきたいと思います。
storeは、APIDocumentに
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
とあり、storeはデータソースであることがわかります。データの実体ですね。その型はExt.data.Storeを使っているよーと言うことです。
colModelは、
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
とあり、girdの列定義をあらわしています。
ちなみにcolModelは、cmというコンフィグオプション名でもよくて、cmは、colModelを表すshorthand（ショートハンド（エイリアス？））だとAPIDocにあります。どちらでもいいですが、colModel / cm は必須コンフィグです。
renderToは、
renderTo:'renderTarget',
先にも記述したとおり、表示先を指定するコンフィグです。document.bodyとか、DOMノードのidを表示先に設定してあげます。サンプルソースのように、コンフィグオプションでレンダリング先を指定してあげることも出来ますし、出来上がったgridから以下のようにしてメソッドとして呼び出すことも出来ます。（メソッド名とコンフィグオプションは必ずしも一致しませんし、コンフィグオプションが全てメソッドとして利用できるわけではなさそうです。）
var grid = new Ext.grid.GridPanel({ /* config options */ });
grid.render( 'renderTarget' );
サンプルソースで使ったコンフィグの残りは表示レイアウトのオプションになります。
title:'simple-grid',
stripeRows:true,
height:150,
width:316,
frame:true
titleはgirdのタイトルになります。これを設定しないとタイトルバーごと表示されません。何かを設定すれば、（例えば空文字でも）タイトルバーは残ります。
stripeRowsは、行を縞々に表示するコンフィグです。ちょっと色が薄いので判りにくいですが、これをtrueにすると行が縞々に表示されます。stripeRowsコンフィグを使わないで実装した場合、デフォルト値がfalseですので、縞々にはなりません。
height / widthはそのまま、縦・横の幅を表します。
最後のframeはこのgridの枠です。true / false で表示・非表示を表していて、デフォルトはfalseです。
コンフィグオプションをつけたり消したりして、表示を見て試してみれば判りやすいかと思います。
【Ext.data.SimpleStoreの解説】
では、GridPanelに必須コンフィグのstoreの解説です。
var store = new Ext.data.SimpleStore({
fields: [
{ name: 'a' },
{ name: 'b' }
],
data:[
[ 'hoge', 1 ],
[ 'moge', 2 ],
[ 'fuga', 3 ]
]
});
ソースは上記のようになっています。gridと同じようにExt.data.SimpleStore({ /* コンフィグオプション群 */ })コンフィグオプションを設定します。Ext.data.SimpleStoreはExt.data.Storeを継承したデータストアで、配列でStoreデータを簡単に構築できるクラスです。見ると、fieldsもdataも配列で構築されていることがわかります。
fields: [
{ name: 'a' },
{ name: 'b' }
],
fieldsは、ストア上のフィールド定義です。名前に a / b と付けてみました。gridそのものを見ると列ヘッダにtitle / numberとありますが、ストア上にあるフィールド名は a / b となります。（girdはStoreとColumnModelのファサード（ラッパー）だと理解すればいいと思います。）データを正しくマッピングできるように重複しない名前を定義してあげてください。（マッピングは次のExt.grid.ColumnModelで行います。）
data:[
[ 'hoge', 1 ],
[ 'moge', 2 ],
[ 'fuga', 3 ]
]
dataは、そのまんまデータを表していて、多次元配列（２次元配列）で定義します。表のイメージを実装してあげることが出来るので便利ですが、多次元配列で定義することに注意してください。例えば、fieldsが１つの場合でも
data:[
'hoge',
'moge',
'fuga'
]
とせずに
data:[
[ 'hoge' ],
[ 'moge' ],
[ 'fuga' ]
]
のように多次元配列で構築する必要があります。
【Ext.grid.ColumnModelの解説】
var clmnModel = new Ext.grid.ColumnModel([
{ header: "title", width: 200, dataIndex: 'a' },
{ header: "number", width: 100, sortable: true, dataIndex: 'b' }
]);
まず、ソースを抜き出してみました。このクラスは
Ext.grid.ColumnModel([{ /* コンフィグオプション群 */ },{ /* コンフィグオプション群 */ } ]);
のように、配列でコンフィグオプションをイニシャライズする必要があります。カラム定義が１つの場合は、コンフィグオプション群も１つになるかと思いますが、以下のように配列で定義しないで実装すると正しく表示されません。（gridの中身が表示されなくなります）
// 正しく表示されない
Ext.grid.ColumnModel({ /* コンフィグオプション群 */ });
// 正しく表示される
Ext.grid.ColumnModel([ { /* コンフィグオプション群 */ } ]);
コンフィグオプションの中身はその機能や、表示系のオプションがたくさん用意されていて、今回使ってみた機能はsortableというコンフィグです。読んで字のごとく該当列がソートできるか出来ないかを表すコンフィグです。デフォルト（sortableを実装していない場合）はソートできないので、titleフィールドはソート表示がグレーアウトされていて、numberフィールドはソードが出来るようになっています。
{ header: "title", width: 200, dataIndex: 'a' },
{ header: "number", width: 100, sortable: true, dataIndex: 'b' }
headerは列のタイトルとなるコンフィグで、widthは列の幅を表しています。dataIndexは上述のstoreで定義したnameとマッピングしています。必須ではありませんので定義しなくても表示されますが、明示的にマッピングして表示してあげたほうがいいかと思います。
他にもこのサンプルソースにすぐ使えそうな機能コンフィグとして以下のようなものがあります。editorというコンフィグで各セルの編集が出来るようになるのですが、これはgirdそのものがExt.grid.EditorGridPanelでないと機能しないようです。（次回解説します。）
- hidden:Boolean
- 列そのものを表示させるかどうかです。trueにすると非表示となります。カラムメニューから再表示させることが出来ます。
- hideable:Boolean
- 列を非表示に出来るかどうかです。falseにすると非表示にすることが出来なくなり、カラムメニューから該当列の表示・非表示のチェックボックスが消えます。
- resizable:Boolean
- 列の幅をリサイズできるかどうかです。falseにすると、リサイズが出来なくなります。
- menuDisabled:Boolean
- 列メニューを使えるようにするかどうかです。trueにすると、該当列の列メニュードロップダウン表示（▼←こんなの）がなくなりメニューが使えなくなります。
- tooltip:String
- 列にマウスをあわせたときにtooltipが表示されます。
というわけで、gridの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。
