ExtJS入門18 グリッド レンダラーを使ってデザインを変える
グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。
レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。
前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。
レンダラーを使ったサンプル
・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-basic2.js"></script>
</head>
<body>
</body>
</html>
・JS
Ext.onReady(function(){
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
}
];
var store = new Ext.data.JsonStore({
data:data,
fields:[
{name:'id'},
{name:'rank'},
{name:'name'},
{name:'percentage',type:'float'}
]
});
//レンダラーを作成する
//ブラウザ名用レンダラー
var browserRenderer = function(val) {
var newVal;
switch (val) {
case 'IE':
newVal = '<span style="color:blue;">IE</span>';
break;
case 'Chrome':
newVal = String.format('{0}{1}{2}{3}{4}{5}',
'<span style="color:blue;">C</span>',
'<span style="color:red">h</span>',
'<span style="color:yellow">r</span>',
'<span style="color:blue">o</span>',
'<span style="color:green">m</span>',
'<span style="color:red">e</span>'
);
break;
case 'Firefox':
newVal = '<span style="color:orange;">Firefox</span>';
break;
case 'Safari':
newVal = '<span style="color:#AAA;">Safari</span>';
break;
case 'Opera':
newVal = '<span style="color:red;">Opera</span>';
break;
default:
newVal = val;
break;
}
return newVal;
};
//ランキング用レンダラー
var rankRenderer = function(val){
var size = (8 - val) * 10;
return String.format('<span style="font-size:{0}px">{1}</span>',size,val);
};
//カラムモデル
var column = new Ext.grid.ColumnModel([
{
header:'順位',
sortable:true,
dataIndex:'rank',
width:90,
renderer:rankRenderer
},
{
header:'ブラウザ名',
sortable:true,
dataIndex:'name',
width:100,
renderer:browserRenderer
},
{
header:'シェア',
sortable:true,
dataIndex:'percentage',
width:80
},
{
header:'ID',
sortable:true,
dataIndex:'id',
hidden:true
}
]);
new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
id:'my-grid',
title:'2009年12月のブラウザシェア',
height:420,
width:280,
cm:column,
store:store
});
});
・実行結果
レンダラー付きグリッド
APIリファレンスではExt.grid.ColumnModelのsetRendererとExt.grid.Columnクラスのrendererの部分に詳しく載っています。
Ext 3.0 – API Documentation 日本語版 – Ext.grid.ColumnModel
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel
Ext 3.0 – API Documentation 日本語版 – Ext.grid.Column
http://extdocs.xenophy.com/?class=Ext.grid.Column
レンダラーは関数として作ります。引数として渡されるのは以下のものがあります。
- value : Object セルのデータ値。
- metadata : Object セルのtd要素に追加するCSSクラス名等を含むオブジェクト
- record : Ext.data.record データが引き出されたExt.data.Record。
- rowIndex : Number 列のインデックス
- colIndex : Number カラムのインデックス
- store : Ext.data.Store レコードが引き出された Ext.data.Storeオブジェクト。
Ext 3.0 – API Documentation 日本語版 – Ext.grid.ColumnModel
単純にグリッドに設定される値だけを使うのであれあば、第一引数に渡される値を使うだけです。
返り値にはHTML返すこともできるので、今回はspanを追加して文字色と文字サイズを変更しています。
レンダラーを使うことで、グリッドのデザインをある程度自由に変更できます。rendererに渡される引数をもとに様々な値を返して、グリッドのデザインを変更することでエクセルっぽくないグリッドを作れたりします。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
