Sencha Touch|Sencha Touch中文|Sencha Touch中文教程

Sencha Touch同样可以使用地图、多媒体等插件。
1、Map组件
我们通过Ext.Map定义Map组件，其xtype为map。除了使用该插件外，还要调用Google的地图API所使用的js文件，代码如下：

<script src=”https://maps.google.com/maps/api/js?sensor=true”></script>

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

一、排序
当我们想根据数据的某一个字段排序时，可以调用sort方法：

    store.sort(‘lastName’,’asc’);

如果想对多个字段进行排序，可以执行如下代码：

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

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

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

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

Sencha Touch中提供了许多组件，这一次以轮播组件（carousel）为引子，介绍一下Sencha Touch组件的使用方法。
以下先给出轮播插件的具体实现方法：

这里使用default定义了在这个fieldset中的默认labelwidth属性值都为20&（有很多陌生的地方暂且不用管，以后会说到）
此外，轮播组件还有以下其他属性：
carousel.next();//显示之前一个
carousel.prev();//显示之后一个
carousel.setActiveItem(1);//指定显示任何一个
这里指的是轮播显示的界面

了解了大致的Sencha Touch框架之后，我们就可以在其中进行代码的编写了。只要上一篇的内容都按部就班的做了，接下来要做的就是慢慢学这个框架，按照内容敲代码—看结果，基本没有什么过不去的地方。

首先跟上次一样，建立index.html文件和对应的app.js文件。用Sencha Touch搭建的移动web应用，app.js的内容框架大致如下：