ExJS入門28 チェックボックス付きグリッドパネル
そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回はExJS入門21 グリッド・セレクション・モデルのサンプルコードを使って、チェックボックス付きグリッドに変更します。
チェックボックスつきグリッドパネル
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExJS入門21 グリッド・セレクション・モデル
- ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
- ExtJS入門23 グリッドへの項目の追加と削除
- ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
- ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
- ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン
- 第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.CheckboxSelectionModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.CheckboxSelectionModel
JSON:
{
success:true,
total:6,
rows:[
{
'id':1,
'rank':1,
'name':'IE',
'percentage':62.69,
'url' : 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
'img' : '../img/ie64.png'
},
{
'id':2,
'rank':2,
'name':'Firefox',
'percentage':24.61,
'url' :'http://mozilla.jp/firefox/',
'img' : '../img/firefox64.png'
},
{
'id':3,
'rank':3,
'name':'Chrome',
'percentage':4.63,
'url' : 'http://www.google.com/chrome/',
'img' : '../img/chrome64.png'
},
{
'id':4,
'rank':4,
'name':'Safari',
'percentage':4.46,
'url': 'http://www.apple.com/jp/safari/',
'img' : '../img/safari64.png'
},
{
'id':5,
'rank':5,
'name':'Opera',
'percentage':2.40,
'url' : 'http://jp.opera.com/',
'img' : '../img/opera64.png'
},
{
'id':6,
'rank':6,
'name':'Opera Mini',
'percentage':0.53,
'url' : 'http://jp.opera.com/',
'img' : '../img/opera64.png'
}
]
}
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名古屋勉強会 セレクションモデルその2</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-selection2.js"></script>
<style TYPE="text/css">
<!--
.tick {background-image: url(../img/icon/tick.png) !important;}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
チェックボックスセレクションモデルで複数選択。
</p>
<div id="grid"></div>
<br/>
Java Script：<a href="grid-selection2.js">grid-selection2.js</a><br/>
JSONデータ：<a href="data.json">data.json</a><br />
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
//1.データを用意
//今回はファイルでdata.jsonを読み込んでいます
//2.データストアを用意
var store = new Ext.data.JsonStore({
url:'data.json',
root:'rows', //実際のデータ位置（プロパティ名）
totalProperty:'total', //全件数を返すプロパティ名を指定
fields:[
{name:'id'},
{name:'rank'},
{name:'name'},
{name:'percentage',type:'float'},
{name:'url',type:'url'},
{name:'img',type:'url'},
],
autoLoad:true //描写後に自動的に初回のリクエストをかける
});
//3.SelModelの設定
var checkSm = new Ext.grid.CheckboxSelectionModel({
/* 一行しかチェックできなくする場合
singleSelect:true,
header:''
*/
});
//4.カラムモデルを用意
var checkCm = new Ext.grid.ColumnModel([
checkSm, //セレクションモデルをカラムに設置
{
id:'rank',
header:'順位',
dataIndex:'rank',
width:50
},
{
id:'name',
header:'ブラウザ名',
dataIndex:'name',
width:100
},
{
id:'percentage',
header:'シェア',
dataIndex:'percentage',
width:80
},
{
id:'id',
header:'ID',
dataIndex:'id',
width:20
}
]);
//5.グリッドパネルの作成
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
id:'my-grid',
autoExpandColumn:'name',
title:'チェックボックスのグリッドパネル',
height:210,
width:400,
cm:checkCm,
sm:checkSm,
store:store,
tbar:[
{
text:'選択中のブラウザ情報',
iconCls:'tick',
handler:function(btn){
var record = grid.selModel.getSelections();
var msg;
if (!record) {
msg = 'ブラウザが選択されていません';
}else{
msg = new Ext.XTemplate(
'<div style="width:400px;">',
'<tpl for=".">',
'<div style="width:200px; text-align:center;',
'{[xindex % 2 === 1 ? "float:left" : "float:right;"]}',
'">',
'ブラウザ名：{values.data.name}<br/>',
'順位：{values.data.rank}<br/>',
'シェア：{values.data.percentage}%<br />',
'<a href="{values.data.url}" target="_blank">DOWNLOAD</a><br/>',
'<img src="{values.data.img}" />',
'{xcount}',
'{xindex}',
'</div>',
'</tpl>',
'<tpl if="xindex % 2 === 1">',
'<div style="clear:both;"></div>',
'</tpl>',
'</div>'
).apply(record);
}
Ext.Msg.alert('選択中のブラウザ',msg);
}
}
]
});
});
実行結果:
チェックボックスつきグリッドパネル
複数選択時の挙動
グリッドのセレクションモデルにExt.grid.CheckboxSelectionModelクラスを指定することで、簡単にグリッドをチェックボックス付きにできます。
まずチェックボックスセレクションモデルを作成します。
Ext.grid.CheckboxSelectionModelはExt.grid.RowSelectionModelのサブクラスです。
Ext.grid.CheckboxSelectionModelのコンフィグにはいくつかのオプションがありますが、各行のチェックボックスをクリックして行を選択するだけであれば初期値のままで十分機能します。
サンプルコードの中でコメントアウトしているように、singleSelectをtrueにすることでラジオボタンのように1つしかチェックできなくすることもできます。その場合カラムのヘッダーに表示される、全て選択のチェックボックスの動作が気持ち悪くなるのでheaderを表示しないようにしています。
次に作成したセレクションモデルをカラムモデルに設置します。今回はカラムの先頭に置いていますが、任意の位置に設定できます。
以上で、チェックボックス機能を備えたグリッドが完成します。今回はシングルセレクトではなく複数のレコードが選択されています。そのためtbarの情報を表示ボタンで実行する処理を変更する必要があります。
現在選択しているレコードの取得はセレクションモデルから取得します。以前のグリッドではgrid.selModel.getSelected()で現在選択されているレコードオブジェクトを取得できました。複数選択されている場合にgetSelected()を実行すると、最後に選択されたレコードだけを取得します。複数選択時はgetSelected()ではなくgetSelections()として選択されているレコードを配列で取得します。このメソッドはExt.grid.RowSelectionModelで定義されているので、Ext.grid.CheckboxSelectionModelでもそのまま使えます。
今回のサンプルでは、取得したレコードの配列をXTemplateで展開して表示しています。XTemplateについて詳しくはこちら第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExJS入門28 チェックボックス付きグリッドパネル [...]
ExJS入門30 Twitter Search APIを使ったグリッドパネル | ExtJSで楽しくRIA業務アプリ開発
7 5 月 10 at 11:52 AM