本文已添加至Sencha Touch 2快速入门系列索引：http://blog.csdn.net/ardy_c/article/details/7544470
转载请注明出处：http://blog.csdn.net/ardy_c/article/details/7631641
在开发一个应用的时候，很多情况下前端页面需要与后台进行数据交互，包括数据的读取和持久化。Sencha Touch 2 为我们提供了一个data package来实现数据交互的功能。而这个data package的运作，是通过以下三个模块相互支撑的：Model、Store、Proxy。
Model
Model（Ext.data.Model），就是一个数据模型。它所表现的就是你的应用所关心的一个数据实体模型。说白一些，就是你的应用所需要的数据实体包含哪些字段，每个字段是什么类型。Model 就是负责诠释这些东西，是一个字段信息的集。当然，它的功能不止这些，后面我们会详细介绍。先看看以下一段示例代码：
- Ext.define('User', {
- extend: 'Ext.data.Model',
- config: {
- fields: [
- { name: 'id', type: 'int' },
- { name: 'name', type: 'string' }
- ]
- }
- });
Store
Store（Ext.data.Store），如果model是字段的集合，那些Store正好与之相对应，是数据记录的集合，每条记录都存在着与model相对应的字段值。另外，它还能对数据进行排序、过滤、组合等操作。
- Ext.create('Ext.data.Store', {
- model: 'User',
- data: [
- { id: 1, name: 'Ed' },
- { id: 2, name: 'Tommy' }
- ]});
Proxy
Proxy，一般为Store所用，用于处理数据的加载和持久化。其中，Proxy有两种类型：客户端和服务端。客户端是指基于浏览器内存的数据读取和存储，或者当HTML5的Local Storage属性可用时，我们可以进行基本客户端本地的数据读取和存储；服务端，相信大家也比较熟悉，包含有Ajax、JsonP和Rest。我们来看看一个Proxy的使用实例：
- Ext.define('User', {
- extend: 'Ext.data.Model',
- config: {
- fields: ['id', 'name', 'age', 'gender'],
- proxy: {
- type: 'rest',
- url : 'data/users',
- reader: {
- type: 'json',
- root: 'users'
- }
- }
- }
- });
- // 使用model中定义的proxy
- Ext.create('Ext.data.Store', {
- model: 'User'
- });
Proxy一般为Store所用，但也可以在Model中进行定义。当Proxy定义于Model中，在创建Store的时候，store自动与在model中定义的proxy进行关联。在Model上定义Proxy有两个好处：1，Model可能会被多个Store引用到，在Model上定义了Proxy，就不用在Store上重复定义了；2，可能绕开Store，直接在Model上加载和存储数据。在上面代码建立了一个rest方式的proxy（type: 'rest'）。url是rest资源的地址。由于请求响应返回的时json格式结果，所以我们设定了一个json reader去对结果进行解析，以结果中的users结果作为根开始读取响应信息。我们再来看一个例子：
- var User = Ext.ModelMgr.getModel('User');
- var ed = Ext.create('User', {
- name: 'Ed Spencer',
- age : 25
- });
- ed.save({
- success: function(ed) {
- console.log("Saved Ed! His ID is "+ ed.getId());
- }
- });
- User.load(1, {
- success: function(user) {
- console.log("Loaded user 1: " + user.get('name'));
- }
- });
验证（Validation）
在日常的表单处理中，数值的验证是非常频繁使用的操作。Sencha Touch 2 为大家提供了一些方便的验证方法，只需要在Model中加入一些验证逻辑，即可实现对输入数据的验证。我们来看看一面一段代码：
- Ext.define('User', {
- extend: 'Ext.data.Model',
- config: {
- fields: ...,
- validations: [
- { type: 'presence', field: 'name' },
- { type: 'length', field: 'name', min: 5 },
- { type: 'format', field: 'age', matcher: /\d+/ },
- { type: 'inclusion', field: 'gender', list: ['male', 'female'] },
- { type: 'exclusion', field: 'name', list: ['admin'] }
- ],
- proxy: ...
- }
- });
- presence：简单验证该字段是否存在数值，数字0是合法数值，空字符串是非法。
- length：验证字符串长度，是否大于、是否小于或是否在最大值和最小值之间，最大、最小值都是可选的。
- format：验证字符串是否符合设定的正则表达式。
- inclusion：验证字符串是否为指定的值的其中之一，是则通过验证。
- exclusion：验证字符串是否为指定的值的其中之一，否则通过验证。
现在我们来验证一下上面的代码所添加的验证功能是否可以正常工作。
- // 新建一个User实例，我们特意违返验证规则
- var newUser = Ext.create('User', {
- name: 'admin',
- age: 'twenty-nine',
- gender: 'not a valid gender'
- });
- // 执行验证
- var errors = newUser.validate();
- console.log('Is User valid?', errors.isValid()); // 存在错误信息，返回 false
- console.log('All Errors:', errors.items); // 返回这个实例中产生的错误的数组
- console.log('Age Errors:', errors.getByField('age')); // 返回该字段中产生的错误信息
上面代码中，在新建一个User实例后，执行了validate()的方法。执行这个方法，程序才会对实例中的各个字段，根据配置的验证方法进行验证，然后返回一个包含验证错误信息和一些方法（例如isValid()、getByField()）的对象。我们可以通过调用这些方法来获取我们需要的信息。