ExJS入門31 GridViewでグリッドの各行の背景色を変更する
もうグリッドはもうほんとにネタ切れですね、前回のTwitter APIを少し修正して最新一時間以内のtweetが分かるように背景色を変えてみたいと思います。グリッドの見た目はGridViewで変更します。GridViewはGridPanelクラスのviewConfigで設定できるということも以前のサンプルで紹介したので、今回はささっとサンプルを紹介します。
一時間以内のtweetだけ背景色を緑に
ほぼ前回のサンプルコードをそのまま使用するので、前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門30 Twitter Search APIを使ったグリッドパネル
グリッドパネル関連の過去の記事はこちらからです。
- 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入門26 エディタブル・グリッド（色々なエディターを設定する)
- ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン
- ExJS入門28 チェックボックス付きグリッドパネル
- ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
- ExJS入門30 Twitter Search APIを使ったグリッドパネル
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView
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名古屋勉強会 Twitter API + GridView</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-rowclass.js"></script>
<style TYPE="text/css">
<!--
.search {background-image: url(../img/icon/magnifier.png) !important;}
.recent-update {
background-color:#EFFFEF;
}
-->
</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;">
Twitter Search APIを利用したグリッドその2 （1時間以内の更新には背景を緑に、30秒毎に自動更新）
</p>
<div id="grid"></div>
<br/>
Java Script：<a href="grid-rowclass.js">grid-rowclass.js</a><br/>
Twitter API：<a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search" target="_blank">Twitter Search API Method: search</a>
</div>
</body>
</html>
Java Script:
Ext.onReady(function(){
//ストアの設定
var store = new Ext.data.JsonStore({
//Twitter Search APIをJSONPで利用
proxy:new Ext.data.ScriptTagProxy({
url:'http://search.twitter.com/search.json'
}),
baseParams:{
q:'extjs'
},
paramNames:{
start:'page',
limit:'results_per_page'
},
autoLoad:true,
root:'results',
idProperty:'id',
fields:[
'profile_image_url',
'created_at',
'from_user',
'metadata',
'to_user_id',
'text', //本文
'id',
'from_user_id',
'geo', //GEOタグ
'iso_language_code',
'source' //クライアントの種類
]
});
//各レンダラーの設定
var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
return String.format('<div"><img src={0} alt="{1}"/></div>',
value,
store.getAt(rIndex).data.from_user
);
};
var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
var data = store.getAt(rIndex);
return String.format('<div style="white-space:normal;"><p><a target="_blank" href="http://twitter.com/{0}"><b>{0}</b></a>:{1}</p><br/><span style="color:#CCC">{2}</span></div>',
data.get('from_user'),
value,
Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
);
};
//閾値
var gateTime = new Date().add(Date.HOUR, -1);
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
height:600,
loadMask:true,
store:store,
autoExpandColumn:'title',
cm:new Ext.grid.ColumnModel({
columns:[
{
id:'id', header:'ID', dataIndex:'id', hidden:true
},
{
id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
},
{
id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
}
]
}),
tbar:[
'->',
{
xtype:'textfield',
name:'keyword',
itemId:'keyword'
},
{
text:'Search',
iconCls:'search',
scope:this,
handler:function(){
var tbar = grid.getTopToolbar();
var value = tbar.getComponent('keyword').getValue();
grid.getStore().load({
params:{
q:value
}
});
}
}
],
//GridViewの設定
viewConfig:{
getRowClass:function(record,rIndex,rParams,store){
var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
if (postTime > gateTime) {
return 'recent-update';
}
}
}
});
//自動アップデート
var task = {
run:function(){
store.reload();
//閾値の更新
gateTime = new Date().add(Date.HOUR, -1);
},
interval:1000 * 30 //msec * sec
};
Ext.TaskMgr.start(task);
});
実行結果:
GridViewで行の背景色を変更する
APIからストアへの取得は前回のサンプルコードを参考にしてください。
前回との違いはGridViewのgetRowClassメソッドをオーバーライドして、行ごとのクラスを設定するところです。
GridViewクラスはGridPanelの見た目とUIを決定しています。GridViewを記述していないGridPanelであっても作成時にGridView自動的に生成されています。
以前のサンプルでemptyTextを使用する例を簡単に紹介しました。GridViewクラスではさらにいくつかのグリッドの見た目設定を調整できます。
今回のサンプルでは書くtweetのアップデート時の時刻から、最新一時間以内のものの背景色を変更します。各行に対してCSSのクラスを設定するにはGridViewクラスのgetRowClassメソッドをオーバーライドして、クラス名を返すことで、その行にカスタムのクラスを設定することができます。
以下がサンプルコードで設定しているgetRowClassの部分です。
//閾値
var gateTime = new Date().add(Date.HOUR, -1);
・・・
viewConfig:{
getRowClass:function(record,rIndex,rParams,store){
var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
if (postTime > gateTime) {
return 'recent-update';
}
}
}
gateTimeは一時間前の時刻を設定しています。
Dateオブジェクトのaddメソッドを使うことで、日付の演算ができます。Date.HOUR -1で一時間前を設定しました。
getRowClassメソッドは各行ごとに実行されるのでgateTimeは外で宣言しておくほうがよさそうです。
postTimeはTwitter APIから取得される投稿時刻をパースしてDateオブジェクトを制しえしています。Date.parseDate()の第2引数に日付のフォーマットを指定しています。Twitter APIでは’D, d M Y G:i:s O’という日付のフォーマットでした。
あとはgateTime以後の場合のみ’recent-update’という文字列を返り値にしています。これで一時間以内の行のCSSラスに’recent-update’が追加されます。
もう一つ前回からの変更点で、各tweetの日付を日本語のフォーマットにしています。これもparseDateを使っています。titleRendererを以下のように変更しています。Date.parseDate().format(’H時m分s秒 n月j日’)の部分です。
var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
var data = store.getAt(rIndex);
return String.format('<div style="white-space:normal;"><p><a target="_blank" href="http://twitter.com/{0}"><b>{0}</b></a>:{1}</p><br/><span style="color:#CCC">{2}</span></div>',
data.get('from_user'),
value,
Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
);
};
JSONPはYouTubeやTwitter以外の色々なサービスAPIでも供給されています。自分の良く使うサービスのAPIを調べてみてJSONPが利用できるならためしに使ってみると良いかもしれません。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
