Ext.DataViewの使い方
ダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080513時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。
【パス】 ext-2.1\examples\view\data-view.html開いてみると、何も見えませんね。これはサーバサイトスクリプトを参照しに行っていてその参照先がローカルのget-images.phpにあるためです。ですので直接ExtJSのDataViewサンプルを見てみます。
このウィジェットがDataViewと呼ばれるものです。サンプルではサムネイル画像がならんでいて、マウスをドラッグするか、CTRLまたはSHIFTキーを押しながら選択すると複数のアイテムが選択できるようになっています。今日はこのDataViewの基本的な実装を解説してみたいと思います。あと、いきなりDataViewとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するDataViewのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。
動作サンプルとサンプルソース
Ext.onReady( function(){
var lookup = {};
var siteData = [
['http://mojalog.com','http://capture.heartrails.com/small?http://mojalog.com','mojalog'],
['http://google.co.jp','http://capture.heartrails.com/small?http://google.co.jp','google'],
['http://yahoo.co.jp','http://capture.heartrails.com/small?http://yahoo.co.jp','yahoo'],
['http://extjs.com','http://capture.heartrails.com/small?http://extjs.com','extjs'],
['http://capture.heartrails.com','http://capture.heartrails.com/small?http://capture.heartrails.com','heartrails' ],
['http://youtube.com','http://capture.heartrails.com/small?http://youtube.com','youtube' ]
];
var store = new Ext.data.SimpleStore({
fields: [
{ name: 'siteurl'},
{ name: 'imgurl' },
{ name: 'name' }
],
data : siteData
});
var formatData = function(data){
lookup[data.name] = data;
return data;
};
var view = new Ext.DataView({
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{imgurl}" title="{name}"></div>',
'<span>{name}</span>',
'</div>',
'</tpl>'
),
singleSelect: true,
overClass:'x-view-over',
itemSelector: 'div.thumb-wrap',
store: store,
listeners: {
'dblclick':{
fn:function(){
var selNode = view.getSelectedNodes()[0];
var data = lookup[selNode.id];
location.href=data.siteurl;
}
}
},
prepareData: formatData.createDelegate( this )
});
var panel = new Ext.Panel({
id: 'img-chooser-view',
title: 'DataView',
renderTo: 'container',
width:320,
autoScroll: true,
items:view,
collapsible:true
});
});
【Ext.DataViewの解説】
それではDataViewを見ていきたいと思います。
var view = new Ext.DataView({
という箇所がデータビューそのものになります。前回のgridと同様にstoreというデータストアを保持していてこのstoreの内容がデータの実体になります。DataViewのコンフィグオプションで必須となるのはitemSelectorと言うもののようです。
itemSelector : String This is a required setting. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes this DataView will be working with.とあり、これはDataViewがどのノードで動いているかを決定するために使われる、CSSセレクタというものらしいです。今回は値に'div.thumb-wrap'を持たせてあります。このノードを「データビューのデータとして扱います」ということになるんだと思います。
ちなみにdiv.thumb-wrapは、次のtplというコンフィグオプションで定義します。
tplは、以下のように定義してあります。
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{imgurl}" title="{name}"></div>',
'<span>{name}</span>',
'</div>',
'</tpl>'
),
このtplはExt.XTemplateを使ってテンプレートとして用いているのですが、このXTemplateが非常に強力で、tplノードのアトリビュートを使って演算を行い、実データをオートフィリングしてくれます。上記ではforという演算式を用いて、store内の複数データをスコープ内のタグに埋めていくようになっていますが、if演算式や内臓テンプレート変数、インラインコードの実行なんかも出来るようです。使いこなせればデータのデータのフィルタなんかも出来そうですね。XTemplateのAPIDocを貼っておきます。上記は、{}で括られた name / imgurl をforで展開しています。このnameとimgurlはstoreのfieldsで定義した名前です。
DataViewの基本的なコンフィグオプションはこのくらいで、後はオプションみたいなものです。
overClassはマウスオーバー時のclassを値として持たせています。singleSelectはアイテムを複数選択状態に出来ないようにするものです。これに対してmultiSelectと言うものがあり、このコンフィグオプションを使用してtrueにしておくと、CTRLやSHIFTを押しながら複数選択することが出来ます。
overClass:'x-view-over',
singleSelect: true,
'x-view-over'はスタイルシート内に定義していて、マウスオーバーしたときに表示が変わると言うものです。無くてもいいと思います。最後にlistenersとprepareDataを解説します。
listeners: {
'dblclick':{
fn:function(){
var selNode = view.getSelectedNodes()[0];
var data = lookup[selNode.id];
location.href=data.siteurl;
}
}
},
prepareData: formatData.createDelegate( this )
listenersはイベントリスナーのことです。今回はダブルクリックした際のイベントを拾って画面遷移を行っています。DataViewのgetSelectedNodes()で選択されたノードを返しますので、その先頭を拾ってstoreに格納したデータのsiteurlを解決しています。prepareDataはメソッドなのですが、ロード時にキックされてデータの準備を行うもののようです。今回はformatDataメソッドにその処理を委譲していてlookupオブジェクトに、各データを突っ込んでいっています。lookupオブジェクトは、選択されたデータを探すために利用しています。
var selNode = view.getSelectedNodes()[0];
var data = lookup[selNode.id];
この２行はまず、DataViewで選択されたノードを取り出します。次に、selNode.idをlookupの連想配列のkeyとして指定して、該当のデータを特定します。これで、data.siteurlとか、data.nameとか、data.imgurlで参照が出来るようになっています。selNode.idのidは前述のテンプレート定義の中の
'<div class="thumb-wrap" id="{name}">',
にあるように、ノードのidを指しているのですが、この値はstoreのfieldsの{name}が置かれています。ロード時に、prepareDataで委譲したformatDataメソッドが呼ばれてlookupオブジェクトのkeyであるdata.nameに対してdataがドカドカと格納されていきます。
var formatData = function(data){
lookup[data.name] = data;
return data;
};
これでlookupのkeyはnameで解決できると言うことです。（firebugで分かりました。）というわけで、DataViewの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。
