ExtJS入門17　グリッド・パネル　基本編

10件のコメントがあります

いよいよグリッド・パネルをサンプルをやっていこうと思います。
まず基本として、ごくシンプルなグリッドパネルを作成します。

グリッド関連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とモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

2 月 3rd, 2010 at 11:56 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with ExtJS, grid, JSON, Tips, サンプル, チュートリアル, 勉強会

10 Responses to 'ExtJS入門17　グリッド・パネル　基本編'

Subscribe to comments with RSS or TrackBack to 'ExtJS入門17　グリッド・パネル　基本編'.

[...] 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

ExtJSで楽しくRIA業務アプリ開発