ExtJS入門19 グリッドにページング機能を追加する
かなり更新をさぼってしまいましたが。勉強会に向けてGrid関連のサンプルを紹介していきます。
Ext.PagingToolbar
今回はGridにページング機能を追加するサンプルになります。
多くのwebアプリケーションで項目の一覧を表示する際にページング機能が実装されています。ExtJSの一覧表示といえばGridPanelですが、GridPanelに簡単にページング機能を追加するためのExt.PagingToolbarというものがあります。今回はこのPagingToolbarをグリッドに使ってみます。
グリッドパネルについてはこちらを
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.PagingToolbar
http://extdocs.xenophy.com/?class=Ext.PagingToolbar
PHP(Gridのデータ):
<?php
$limit = $_POST['limit'];
$start = $_POST['start'];
//全データ
$data = array(
array(
'id'=>1,
'rank'=>1,
'name'=>'IE',
'percentage'=>62.69
),
array(
'id'=>2,
'rank'=>2,
'name'=>'Firefox',
'percentage'=>24.61
),
array(
'id'=>3,
'rank'=>3,
'name'=>'Chrome',
'percentage'=>4.63
),
array(
'id'=>4,
'rank'=>4,
'name'=>'Safari',
'percentage'=>4.46
),
array(
'id'=>5,
'rank'=>5,
'name'=>'Opera',
'percentage'=>2.40
),
array(
'id'=>6,
'rank'=>6,
'name'=>'Opera Mini',
'percentage'=>0.53
)
);
if ($limit && $start + $limit <= count($data)) {
//ページング用
$rows = array_slice($data,$start,$limit);
}else {
//ページングしない
$rows = $data;
}
$res = array(
'success' => true,
'total' => 6,
'rows' => $rows
);
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($res);
die();
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 Paging</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-pager.js"></script>
</head>
<body>
<div style="width:400px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">Ext.PagingToolbarを使ってグリッドにページング機能を追加する。</p>
<div id="grid"></div>
<br/>
Java Script：<a href="grid-pager.js">grid-pager.js</a><br/>
PHP(JSONデータ)：<a href="data.php">data.php</a><br />
</div>
</body>
</html>
Java Script:
//ページングできるグリッド
Ext.onReady(function()
{
//1.データを用意
//今回はPHPでdata.phpでページング用のJSONを返しています。
//2.データストアを用意
var store = new Ext.data.JsonStore({
url:'data.php',
root:'rows', //実際のデータ位置（プロパティ名）
totalProperty:'total', //全件数を返すプロパティ名を指定
baseParams:{ //最初のリクエスト時のパラメーター
limit:2,
start:0
},
fields:[
{name:'id'},
{name:'rank'},
{name:'name'},
{name:'percentage',type:'float'}
],
autoLoad:true //描写後に自動的に初回のリクエストをかける
});
//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.ページングツールバーの準備
//storeはGridで使用しているstoreと同じものを指定。
//pageSizeは1ページあたりの取得件数
//このツールバーをGridパネルのbbarに配置する。
var bbar = new Ext.PagingToolbar({
store:store,
pageSize:2
});
//5.グリッドパネルの作成
new Ext.grid.GridPanel({
renderTo:'grid',
id:'my-grid',
title:'ページング付きグリッドパネル',
height:185,
width:260,
cm:column,
store:store,
bbar:bbar
});
});
実行結果:
PagingToolbar
Ext.PagingToolbarは通常グリッドのbbarに設定して、ストアの内容を変更します。そのためExt.PagingToolbarに設定するstoreとGridPanelに設定するstoreは同一のものである必要があります。
今回のstoreではtotalPropery,root,baseParamsといった項目が追加されています。これらの項目がPagingToolbarを正しく機能させるために必要になります。
それぞれの項目は以下のような役割になっています。
- totalProperty:データの全件数
- root:実際のデータの起点となるプロパティ名(PagingToolbarとしては必須ではないがレスポンスに全件数を含めると自動的に必要になる)
- baseParams:初回の取得条件(autoLoad:trueを設定している場合に必須になる)
PagingToolbar自体のコンフィグは非常にシンプルで、基本的なページング機能のみであれば2つのコンフィグを設定するだけです。
- store:Gridに設定しているものと同じストア
- pageSize:一回辺りの取得件数(storeのbaseParamのlimitと揃える)
ページングを機能させるためにはストアに読み込むデータを正しく取得する必要があります。PagingToolbarはstoreの再取得時にlimitとstartという項目を追加します。
limitは取得件数、startは取得位置になります。このPOST値に応じてstoreへ返すJSONを生成します。静的なデータでは上手く動きません。またPagingToolbarはあくまでstoreのデータ取得のリクエストをページングに適した形で上手く行ってくれるだけです。サンプルではPHPでリクエストにあったJSONを生成するようにしてます。
今回のJSONは以下のような形になっています。
{
success:true,
total:6,
rows:[
{
id:1,
rank:1,
name:'IE',
percentage:62.69
},
・・・省略・・・
{
id:6,
rank:6,
name:'Opera Mini',
percentage:0.53
}
]
}
storeに追加した追加のコンフィグはこのJSONを上手く読みこむために必要な項目になります。
ストアの連携が少しややこしいですが、通常のグリッドにいくつか項目を追加するだけでページングが有効になるので、Ext.PagingToolbarがあるのは助かります。
ページングはグリッドのストアをページングに適した形で取得するリクエストを行ってくれると考えておくと良いと思います。JSONの出力はお好みの言語でどうぞ。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門19 グリッドにページング機能を追加する [...]
ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック） | ExtJSで楽しくRIA業務アプリ開発
19 4 月 10 at 12:19 PM
[...] ExtJS入門19 グリッドにページング機能を追加する [...]
ExtJS入門23 グリッドへの項目の追加と削除 | ExtJSで楽しくRIA業務アプリ開発
20 4 月 10 at 4:43 PM
[...] ExtJS入門19 グリッドにページング機能を追加する [...]
ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更) | ExtJSで楽しくRIA業務アプリ開発
23 4 月 10 at 11:39 AM
[...] ExtJS入門19 グリッドにページング機能を追加する [...]
ExJS入門30 Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
7 5 月 10 at 11:54 AM