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

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创建高性能的数据可视化。