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开发移动web应用——Sencha Touch篇(8)的更多相关文章

  1. HTML5开发移动web应用——Sencha Touch篇(7)

    Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...

  2. HTML5开发移动web应用——Sencha Touch篇(10)

    我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...

  3. HTML5开发移动web应用——SAP UI5篇(6)

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  4. HTML5开发移动web应用——SAP UI5篇(8)

    本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...

  5. HTML5开发移动web应用——SAP UI5篇(7)

    SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...

  6. HTML5开发移动web应用——SAP UI5篇(9)

    之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...

  7. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  8. html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载

    <Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...

  9. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

随机推荐

  1. SQL注入原理解析以及举例1

    sql注入是指web应用程序对用户输入数据的合法性没有判断,导致攻击者可以构造不同的sql语句来实现对数据库的操作. sql注入漏洞产生满足条件: 1:用户能够控制数据的输入. 2:原本需要执行的代码 ...

  2. A - Boy or Girl(set)

    Problem description Those days, many boys use beautiful girls' photos as avatars in forums. So it is ...

  3. CMD-echo

    echo 打印 <> echo ^< echo ^> echo 换行 echo 你好@echo.世界. echo 多行打印 > log.log 此时 > 无效.(我 ...

  4. python课程设计笔记(四)整数、浮点数与字符串 time库

    整数类型(范围无限制) 十进制1 -1 二进制0b1 -0b1 八进制0o1 -0o1 十六进制0x1 -0x1 浮点类型(范围有限制但可忽略) 运算存在不确定尾数 :0.1+0.2!=0.3 原因: ...

  5. LeetCode 42. Trapping Rain Water 【两种解法】(python排序遍历,C++ STL map存索引,时间复杂度O(nlogn))

    LeetCode 42. Trapping Rain Water Python解法 解题思路: 本思路需找到最高点左右遍历,时间复杂度O(nlogn),以下为向左遍历的过程. 将每一个点的高度和索引存 ...

  6. 错误:android.util.SuperNotCalledException

    android.util.SuperNotCalledException: Activity {…….YouTubePlayActivity} did not call through to supe ...

  7. Android Studio复制项目 两个App之间不覆盖安装操作步骤

    步骤一:修改包名 第五步注意:不能以数字等作为包名的开头. 步骤二:修改清单文件里面的包名 第八步注意:如果报红,从新引入新的包名下的Mainactivity类. 步骤三:修改Gradle Scrip ...

  8. 关于maven-基本

    笔记 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object ...

  9. 一个单元格占两行三列的HTML代码为

    主要是这两个属性: colspan 单元格占多少列 rowspan 单元格占多少行 <table width="200" border="1">&l ...

  10. mac安装win10后触摸板没有右键功能键的添加技巧

    一些mac用户也会在自己的笔记本电脑上安装windows10系统. 但最近有部分用户发现,安装上win10正式版后,发现无论点击触摸板哪个位置,都只有左键,根本无法右键的问题, 针对此问题,现笔者分享 ...