ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する その2
前回のサンプルのおまけです。前回のサンプルコードExt.DataViewを使ってTwitter Search APIの情報を表示していました。今回はダブルクリックイベントとホバリング時のCSSクラスの設定を行ってもう少し使えるアプリっぽく修正しました。
DataViewのホバリング設定
ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する
関連の記事はこちらからです。
- ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
- ExJS入門30 Twitter Search APIを使ったグリッドパネル
- ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.DataViewクラス
http://extdocs.xenophy.com/?class=Ext.DataView
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 DataView</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="dataview-twitter2.js"></script>
<style TYPE="text/css">
<!--
.search {background-image: url(../img/icon/magnifier.png) !important;}
.tweet
{
width:148px;
height:300px;
margin:2px;
padding:3px;
border:dotted 1px #CCC;
background-color:#F9F9F9;
float:left;
}
.tweet-hover
{
background-color:#F0F0FF;
}
.tweet_text
{
background-color:#FFF;
padding:3px;
}
span.tweet_date
{
font-size:x-small;
}
-->
</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を利用したデータビュー （30秒毎に自動更新）
</p>
<div id="panel"></div>
<br/>
Java Script：<a href="dataview-twitter2.js">dataview-twitter2.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 tpl = new Ext.XTemplate(
'<div id="twitter-tpl">',
'<tpl for=".">',
'<div class="tweet" >',
'<img src={profile_image_url} alt="{from_user}"/>',
'<h1><a target="_blank" href="http://twitter.com/{from_user}"><b>{from_user}</b></a>:{1}</h1>',
'<span class="tweet_date">{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} </span>',
'<br/>',
'<div class="tweet_text">{text}</div>',
'</div>',
'</tpl>',
'</div>');
var panel = new Ext.Panel({
renderTo:'panel',
height:600,
width:500,
autoExpandColumn:'title',
autoScroll:true,
items:new Ext.DataView({
tpl:tpl,
store:store,
autoHeight:true,
itemSelector:'div.tweet',
emptyText:'No Tweet',
//ホバリング時のクラス
overClass:'tweet-hover',
listeners:{
dblclick:function(dataview,index,node,e){
var record = dataview.getStore().getAt(index);
window.open(String.format(
'http://twitter.com/{0}/status/{1}',
record.get('from_user'),
record.get('id')
));
}
}
}),
tbar:[
'->',
{
xtype:'textfield',
name:'keyword',
itemId:'keyword'
},
{
text:'Search',
iconCls:'search',
scope:this,
handler:function(){
var tbar = panel.getTopToolbar();
var value = tbar.getComponent('keyword').getValue();
store.load({
params:{
q:value
}
});
}
}
]
});
//自動アップデート
var task = {
run:function(){
store.reload();
},
interval:1000 * 30 //msec * sec
};
Ext.TaskMgr.start(task);
});
実行結果:
Twitter Data View改
DataViewのホバリング設定
HTMLファイル内でホバリング時に使用するスタイルを記述しておきます。サンプルでは背景色を青っぽく変更しているだけです。
Ext.DataViewでitemSelectorコンフィグに指定したDOMノードにイベントを設定できます。サンプルではdiv.tweet上で動作するようになっています。
データビューはこのノード上ホバリング時にoverClassで指定したCSSクラスをこのノードのCSSクラスに追加します。
次にイベント処理です。イベント処理もホバリングと同じくitemSelectorで指定することでdiv.tweetの要素にイベントハンドラを設定されます。サンプルではdblclickイベントが呼ばれると、そのtweetの単独のページを別windowで開くように処理しています。
itemSelector:'div.tweet',
overClass:'tweet-hover',
listeners:{
dblclick:function(dataview,index,node,e){
var record = dataview.getStore().getAt(index);
window.open(String.format(
'http://twitter.com/{0}/status/{1}',
record.get('from_user'),
record.get('id')
));
}
}
今回は前回のサンプルの簡単な発展形の紹介になりました。次回はチュートリアルに戻りたいと思います。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
