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のグリッドの様々な機能を使っていきます。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門17 グリッド・パネル 基本編 ※時間があればここまで進みます [...]
Ext Japan - ブログ
19 2 月 10 at 1:12 AM