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文件，处理方法也与此前相同。

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！