HTML5开发移动web应用——Sencha Touch篇(8)
来源:互联网 发布:sqlserver history 编辑:程序博客网 时间:2024/06/11 19:08
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创建高性能的数据可视化。
1 0
- HTML5开发移动web应用——Sencha Touch篇(8)
- HTML5开发移动web应用——Sencha Touch篇(4)
- HTML5开发移动web应用——Sencha Touch篇(5)
- HTML5开发移动web应用——Sencha Touch篇(6)
- HTML5开发移动web应用——Sencha Touch篇(7)
- HTML5开发移动web应用——Sencha Touch篇(9)
- HTML5开发移动web应用——Sencha Touch篇(10)
- HTML5开发移动web应用——Sencha Touch篇(11)
- HTML5开发移动web应用——Sencha Touch篇(12)
- 移动web应用开发——Sencha Touch篇(1)
- 移动web应用开发——Sencha Touch篇(2)
- 移动web应用开发——Sencha Touch篇(3)
- 移动web应用开发——Sencha Touch篇(1)
- 移动web应用开发——Sencha Touch篇(2)
- 移动web应用开发——Sencha Touch篇(3)
- 移动web应用开发-Sencha Touch篇(1)
- 移动Web应用开发技术讲解-Sencha Touch 1.1
- 使用Sencha Touch开发移动Web应用平台
- shell 中的continue
- HDU 1005.Number Sequence【用递归会超时】(2.5)
- eval解析JSON注意点
- Theano 逻辑回归教程 的注释
- HDU 1247 Hat’s Words
- HTML5开发移动web应用——Sencha Touch篇(8)
- 自定义等高的cell(代码Autolayout)
- Android基础之Fragment2
- NSWindow.setFrame的坑
- Scanf函数的输入问题
- Open Credit System
- 查找二叉树
- HDU 4612 Warm up(边双连通分量)
- 队列