ext-ui.com

中文教程

移动web应用开发-Sencha Touch篇(9)

DataView用于数据展示,我们来看看具体是如何将数据应用于该组件实现可视化的。

Sencha Touch支持XML和JSON的数据格式。二者虽然数据类型不同,但是在Sencha Touch中的操作都是类似的。我们来以XML举例。

因为之前接触的XML比较少,下面给出XML数据的基本格式:

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

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

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

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

移动WEB应用开发-SENCHA TOUCH篇(7)

除了append,可以使用overwrite函数重写一个元素的内容,道理同上
在指定的位置追加与删除元素,有以下方法:
innsertAfter:在目标元素之后追加元素
innsertBefore:在目标元素之前追加元素
Ext.DomQuery:寻找元素,可以使用css的选择器选择,如:
Ext.DomQuery.select(‘[class*=”d”]’)//选取class为d的元素
Ext.each:遍历所有追加的元素
Ext.removeNode:删除指定元素

移动WEB应用开发-SENCHA TOUCH篇(6)

本次我们来接触一下Sencha Touch中的AJAX以及 相应的后台PHP程序。
实现表单的AJAX异步提交
需要设定的参数:
url:表单提交时的目标URL地址
standardSubmit:使用布尔值指定表单提交方式(true为同步,false为异步,默认为false)

移动web应用开发-Sencha Touch篇(5)

这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用。为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有JavaScript基础的同学就能轻易掌握。

一、利用XTemplate创建HTML代码


聚合内容