DataView是Sencha Touch中最重要的组件，用于数据的可视化。数据可视化的重要性不言而喻，可以讲任何数据以形象的方式展示给用户。目前，如何更好地可视化是许多公司或框架都在追求的。通过数据的可视化可以发现数据之间的规律，预测未来的情况。下面我们就看看Sencha Touch中是怎么进行数据可视化的。

    由于DataView组件内容非常多，所以将在以后的一段时间内持续这一部分的学习。

    首先废话不多说，直接上使用DataView组件的代码框架。

 launch:function(){  
 var store = Ext.create('Ext.data.Store',{//定义数据  
 fields:[  
 'name','url'//定义数据的区域（属性）  
 ],  
 data:[  
 {name:'Tom',url:'a.png'},  
 {name:'Marry',url:'b.png'},  
 {name:'Jack',url:'c.png'},  
 ]  
 });  
 var tpl = new Ext.XTemplate(//定义模板  
 '<tpl for=".">',  
 '<div style="font-size:12px;">',  
 '<img src="{url}" title="{name}" style="width:70px;height:70px;"><br/>',  
 '{name}',  
 '</div>',  
 '</tpl>'  
 );  
 var dataView = Ext.create('Ext.DataView',{  
 fullscreen:true,  
 scrollable:'vertical',  
 store:store,  
 itemTpl:tpl,  
 itemCls:’bookItem’//css中设定对应样式即可  
 });  
 Ext.Viewport.add(dataView);  
 }

    相关注释都在代码中，这里再详细讲解一下。

    首先就是准备数据，这个在之前的博客里也讲过，这里再强调一下。利用store组件定义数据，field定义了数据仓库中数据的属性，这里的属性包括name和url。接下来在data中就可以定义数据了。

    定义好数据store后，我们来定义模板，这里在之前也讲过，其实就是利用数据编辑html内的内容的模板。

    最后，我们定义DataView组件。store属性选择定义好的数据仓库，itemTpl选择之前定义好的模板，这样就把模板、数据、可视化联系到了一起。此外还可以通过itemCls属性设定DataView的css样式。

    在下一次的学习中，我们会更深入的了解DataView组件中的其他属性，以及充分使用DataView创建高性能的数据可视化。

   本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！