HTML5开发移动web应用——Sencha Touch篇(9)

    DataView用于数据展示，我们来看看具体是如何将数据应用于该组件实现可视化的。

    Sencha Touch支持XML和JSON的数据格式。二者虽然数据类型不同，但是在Sencha Touch中的操作都是类似的。我们来以XML举例。

因为之前接触的XML比较少，下面给出XML数据的基本格式：

文件名：bookInfo.xml

<?xml version=”1.0” encoding=”UTF-8”>

<dataset>

<book>

<id>1</id>

<image_url>image/html51.jpg</image_url>

<book_name>HTML5指南</book_name>

<author>Tom</author>

<description>a good book</description>

</book>

//其他类似胜率......

</dataset>

这里我们定义了数据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文件，处理方法也与此前相同。

通过这样的方式，我们就方便的实现了数据可视化操作。