ExtJS入門15 DataViewの使い方
テンプレートの関連のクラスとしてもう一つ、Ext.DataViewクラスがあります。
DataViewはStoreに保持しているデータをページに表示できる形式でアウトプットしてくれるクラスです。
Ext.DataViewでは、BoxComponentが帰ってきます。
Ext.ListView
ExtJS -3.0 日本語APIドキュメント – Ext.DataView
http://extdocs.xenophy.com/?class=Ext.DataView
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名古屋勉強会 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-paul.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
今回はJS側でテンプレートを生成するんので、ほとんど何もありません。
・JS
Ext.onReady(function(){
var calcData = function() {
var data = [];
var item = {}
for (var i =0; i < 50; i++) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
item = {
id:i,
rgb:String.format('rgb({0},{1},{2})', r, g, b)
};
data[i] = item;
}
return data;
};
var initData = calcData();
var store = new Ext.data.JsonStore({
autoLoad:true,
data:initData,
fields:['id','rgb']
});
//XTemplate.fromだとstyleに値を設定できない(Firefox)
var dataViewTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="paul">',
'<div>',
'<div style="background:{rgb};width:100%;height:15px;color:#EEE; font-size:small;">',
'<div>',
'</div>',
'</div>',
'</tpl>'
);
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DataViewでカラーバーを表示',
bodyStyle:{
'text-align':'center'
},
items:{
xtype:'dataview',
tpl:dataViewTpl,
store: store,
autoHeight:true,
itemSelector:'div.paul'
},
buttonAlign:'center',
buttons:[{
scale:'large',
text:'New Color!',
handler:function(){
var newData = calcData();
store.loadData(newData);
}
}]
});
});
まずストアを用意して、データを設定します。今回はJava Scriptでデータを生成していますが、urlでJSONを取得することもできます。
今回はランダムな色を生成してJsonStoreに保持します。アップデートボタンをつけてJsonStoreの値を変更するため関数を作っておきます。
dataViewはそのままではBoxComponentですので、パネルのアイテムとして設定します。これで階層が少し深くなりますが、パネルの機能が使えるようになります。
・実行結果
DataViewサンプル
ランダムに生成された色の値をdivに設定して表示します。ボタンをクリックして内容を更新することができます。なんちゃって横ポールスミスみたいな画面です。
XTemplateなどでは、毎回overwriteメソッドのように上書きを自分で指定していましたが、DataViewの場合はStoreの内容が更新されると自動的に再描画されます。
ストアの内容をさっと表示したい場所では便利です。また外部にAPIを持っていて、頻繁に更新するような場合もDataViewの方が簡単に表示を更新できます。
さらにストアの内容を簡易のグリッドとして表示するExt.ListViewクラスもあります。
ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ・ExtJS入門15 DataViewの使い方 http://extjs.blog.sus4.co.jp/2010/01/26/extjs-tutrorial15/ [...]
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する | ExtJSで楽しくRIA業務アプリ開発
25 2 月 10 at 3:18 PM