HTML 5モバイルWebアプリケーション開発——Sencha Touch編(9)

DataViewは、データの表示に使用されます.このコンポーネントにデータを適用して可視化する方法を見てみましょう.
Sencha TouchはXMLとJSONのデータフォーマットをサポートします.両者はデータ型が異なるが,Sencha Touchでの動作は同様である.XMLを例に挙げてみましょう.
以前に接触したXMLが比較的少ないため、以下にXMLデータの基本フォーマットを示す.
ファイル名:bookInfo.xml



1
image/html51.jpg
HTML 5ガイド
Tom
a good book

//勝率みたいなもの…

ここではデータbookを定義し、各bookにはid、imageが含まれています.urlなどのプロパティ.
次にjsコードを使用してxmlのデータを示します.

launch:function(){
Ext.define(‘BookInfo’,{
extend:’Ext.data.Model’,
config:{
fields:[‘image_url’,’book_name’,’author’,’description’]
}
});
var bookStore = Ext.create(‘Ext.data.Store’,{
model:’BookInfo’,
autoLoad:true,// XML          
proxy:{
type:’ajax’,
url:’bookInfo.xml’,
reader:{//           
type:’xml’,
record:’book’
}
}
});
var bookTemplate = new Ext.XTemplate(
‘<tpl for=”.”>’,
‘<div class=”Book_img”><img src=”{image_url}”/></div>’,
‘<div class=”Book_info”>’,
‘<h2>{book_name}</h2></br><h3>  ：{author}</h3>’
‘<p>{description:ellipsis(40)}</p>’,
‘</div>’
‘</tpl>’
);
var dataview = Ext.create(‘Ext.DataView’,{
store:bookStore,
itemTpl:bookTemplate,
baseCls:’Book’
});
Ext.Viewport.add(dataView);
}

実は前回の例は似ていますが、この例のデータはxmlファイルに格納されています.まず、すべてのプロパティを格納するデータモデルを定義します.これをテンプレートとして、データ・ウェアハウスを構築します.urlはデータが入ったファイル名を指定し、typeはファイル内のデータフォーマットタイプを指定します.他の操作は以前とあまり差がありません.
JSONデータの使い方は同じで、typeを変更するだけです.
サーバのファイルがデータベースに格納されている場合,我々の操作方法は,データベースデータをphpなどの言語で取り出してJSONデータに変換することで,上記の方法で操作することができる.
以下にphpファイル、ファイル名bookInfoを示す.php

<?
$link = mysql_connect(“localhost”,”root”,”root”);
mysql_select_db(“mysql”);
mysql_query(“SET NAMES UTF8”);
$result = mysql_query(“select * from books”,$link);
if(!$resul){
die(‘{“success”:false,”message”:”      ”}’);
}
if(mysql_num_rows($result)>0){
while($obj = mysql_fetch_object($result)){
$arr[]=$obj;
}
echo ‘{“success”:true,”books”:’.json_encode($arr).’}’;
}else{
echo ‘{“success”:false,”message”:”      ”,”books”:””}’;
}
?>

この部分コードデータベースのデータを取り出してjsonデータに変換する、その後bookInfo.phpファイルは以前のbookInfoに相当しますjsonファイル、処理方法もこれまでと同じです.
このようにして,データの可視化操作を容易に実現した.