Sencha Touch 2.0官方指南：使用data包

大多数情况下，data包中的model，store和proxy的用法如下： 

• Model: model代表你应用关心的一个实体。用户，联系人，地址，和产品都可以是model。简单地说，model只是字段(field)和相应数据的集合，当然，它可以做得更多。
• Store: store只是一个model的实例集合。大多数情况下，它只是一个高级的数组，当然它也提供如排序，筛选和分组，以及引发事件等功能。
• Proxy: proxy负责实现所有加载和保存数据的工作。通常你会创建一个AJAX proxy从你的服务器获取数据并加载到store。

model 和 store 

最简单的Model仅仅是一些字段(field)和相应数据的集合。我们来看看Ext.data.Model的四个主要部分 —  Fields,Proxies, Associations 和 Validations.  

现在让我们来看看怎样创建一个model：

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 
        { name: 'id', type: 'int' }, 
        { name: 'name', type: 'string' } 
    ] 
}); 

model通常和一个store一起使用，store基本上是一个model实例集合。创建一个store并加载数据很简单：

Ext.create('Ext.data.Store', { 
    model: 'User', 
    proxy: { 
        type: 'ajax', 
        url : 'users.json', 
        reader: 'json' 
    }, 
    autoLoad: true 
}); 

我们在store里配置了Ajax Proxy，提供URL名称，要求返回的数据编码格式能够被Reader正常使用。在本例中我们的服务器返回JSON格式的数据，所以我们已经建立了一个JSON Reader来读取返回数据。store从URL users.json自动加载了model User的实例集合。users.json的URL应该返回一个JSON字符串，像这样：

{ 
    success: true, 
    users: [ 
        { id: 1, name: 'Ed' }, 
        { id: 2, name: 'Tommy' } 
    ] 
} 

实时效果，请见Simple Store示例。 

内部数据 

Store也可以加载内部数据。在内部，Store会把我们传递的所有数据对象转为Model实例:

Ext.create('Ext.data.Store', { 
    model: 'User', 
    data: [ 
        { firstName: 'Ed',    lastName: 'Spencer' }, 
        { firstName: 'Tommy', lastName: 'Maintz' }, 
        { firstName: 'Aaron', lastName: 'Conran' }, 
        { firstName: 'Jamie', lastName: 'Avins' } 
    ] 
}); 

Inline Data 示例 

排序和分组 

Store既能够进行本地排序，筛选和分组，也支持远程排序，筛选，和分组：

Ext.create('Ext.data.Store', { 
    model: 'User', 
  
    sorters: ['name', 'id'], 
    filters: { 
        property: 'name', 
        value   : 'Ed' 
    }, 
    groupField: 'age', 
    groupDir: 'DESC' 
}); 

在我们刚刚创建的Store中，数据将首先由name排序，然后由id排序;数据只包含过滤条件name等于Ed的用户，按age降序分组。随时都可以简单地通过Store API改变排序，筛选和分组。实时效果，请见Sorting Grouping Filtering Store 示例。 

Proxy 

proxy被store用于处理model数据加载和保存。proxy有两种类型：客户端和服务器端。在客户端Proxy例子里，如果HTML5的本地存储特性可用，则可以使用浏览器内存和本地存储来存储数据。服务器端proxy处理远程服务器的封装数据，例如AJAX，JSONP和Rest。 

proxy可以直接在model里定义，像这样：

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'name', 'age', 'gender'], 
    proxy: { 
        type: 'rest', 
        url : 'data/users', 
        reader: { 
            type: 'json', 
            root: 'users' 
        } 
    } 
}); 
  
// Uses the User Model's Proxy 
Ext.create('Ext.data.Store', { 
    model: 'User' 
}); 

这有助于两个方面。首先，可能使用User model的每个store都需要以同样的方法加载数据，因此我们需要避免重复为每个store定义proxy。其次，我们可以不使用store直接加载和保存model数据：

// Gives us a reference to the User class 
var User = Ext.ModelMgr.getModel('User'); 
  
var ed = Ext.create('User', { 
    name: 'Ed Spencer', 
    age : 25 
}); 
  
// We can save Ed directly without having to add him to a Store first because we 
// configured a RestProxy this will automatically send a POST request to the url /users 
ed.save({ 
    success: function(ed) { 
        console.log("Saved Ed! His ID is "+ ed.getId()); 
    } 
}); 
  
// Load User 1 and do something with it (performs a GET request to /users/1) 
User.load(1, { 
    success: function(user) { 
        console.log("Loaded user 1: " + user.get('name')); 
    } 
}); 

porxy也可以利用HTML5新功能的优势 - LocalStorage和SessionStorage。虽然老的浏览器不支持HTML5的这些新API，但是对很多应用程序来说，使用它们的将可以使你受益匪浅。Model直接使用Proxy的示例。

关联关系 

Model之间可以通过Associations API建立关联关系。大多数应用程序需要处理许多不同的Model，Model之间总是有各种关联。一个博客应用程序可能有User，Post和Comment这些model。每个用户会创建许多帖子，每篇帖子又会收到许多评论。我们可以像这样表达这些关系：

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'name'], 
    proxy: { 
        type: 'rest', 
        url : 'data/users', 
        reader: { 
            type: 'json', 
            root: 'users' 
        } 
    }, 
  
    hasMany: 'Post' // shorthand for { model: 'Post', name: 'posts' } 
}); 
  
Ext.define('Post', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'user_id', 'title', 'body'], 
  
    proxy: { 
        type: 'rest', 
        url : 'data/posts', 
        reader: { 
            type: 'json', 
            root: 'posts' 
        } 
    }, 
    belongsTo: 'User', 
    hasMany: { model: 'Comment', name: 'comments' } 
}); 
  
Ext.define('Comment', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'post_id', 'name', 'message'], 
  
    belongsTo: 'Post' 
}); 

很容易就可以把你应用程序中不同model之间丰富关系表示出来。每个model可以与多个其他model建立关联，你的model也可以在任意命令中定义。一旦我们有一个model的实例，我们可以很容易地遍历相关的数据。例如，记录一个选定用户在所有博文上的留言，可以这样做：

// Loads User with ID 1 and related posts and comments using User's Proxy 
User.load(1, { 
    success: function(user) { 
        console.log("User: " + user.get('name')); 
  
        user.posts().each(function(post) { 
            console.log("Comments for post: " + post.get('title')); 
  
            post.comments().each(function(comment) { 
                console.log(comment.get('message')); 
            }); 
        }); 
    } 
}); 

我们上面创建的model都添加了一个新的方法hasMany。这是声明每个User model有多个Post。在上面的代码片段中，我们用到了user.posts()方法。调用user.posts（）方法返回一个Post model配置的store。同样，因为在Post model也声明了与Comment的hasMany关系，我们可以调用comments()方法。 

关联关系不仅在加载数据时有用，在添加新记录时也有用：

user.posts().add({ 
    title: 'Ext JS 4.0 MVC Architecture', 
    body: 'It\'s a great Idea to structure your Ext JS Applications using the built in MVC Architecture...' 
}); 
  
user.posts().sync(); 

在这里，我们实例化了一个新的Post，它会自动在user_id字段添加这个用户的id。调用sync()方法可以通过配置的proxy保存这个新Post对象。你别看这个方法名称叫sync()，这是一个异步操作，如果你想在操作完成时得到通知，你要传递一个回调方法。 

在model中，也有新的方法生成belongsTo关系。像下面的代码这样使用：

// get the user reference from the post's belongsTo association 
post.getUser(function(user) { 
    console.log('Just got the user reference from the post: ' + user.get('name')) 
}); 
  
// try to change the post's user 
post.setUser(100, { 
    callback: function(product, operation) { 
        if (operation.wasSuccessful()) { 
            console.log('Post\'s user was updated'); 
        } else { 
            console.log('Post\'s user could not be updated'); 
        } 
    } 
}); 

再次强调，getUser这种读取数据的方法是异步的，必须有一个回调方法来获取用户实例。setUser方法只需要更新外键(在这个例子里面是user_id)为100，再保存Post model。同样的，只要保存操作结束，不管是否保存成功，回调方法都会被执行。 

加载嵌套数据 

你也许会奇怪，为什么我们在调用User.load时会传递一个success方法，但是在存取用户的帖子和评论时又没有这样做。这是因为上面的例子中我们假定当我请求获取一个用户时，服务器返回的用户数据已经嵌套了该用户的所有帖子和评论。通过建立前面例子中那样的关联关系，只需要一次请求框架可以自动解析出嵌套的数据。服务器一次返回所有数据，不仅是用户数据，还包括帖子数据和评论数据，数据格式如下：

{ 
    success: true, 
    users: [ 
        { 
            id: 1, 
            name: 'Ed', 
            age: 25, 
            gender: 'male', 
            posts: [ 
                { 
                    id   : 12, 
                    title: 'All about data in Sencha Touch 2', 
                    body : 'One areas that has seen the most improvement...', 
                    comments: [ 
                        { 
                            id: 123, 
                            name: 'S Jobs', 
                            message: 'One more thing' 
                        } 
                    ] 
                } 
            ] 
        } 
    ] 
} 

这些数据全部被框架自动解析。你可以很容易从几乎所有地方通过配置model的proxy加载数据，然后通过它们的reader处理返回格式。像Sencha Touch1一样，model和store在整个框架中被很多个组件用到，如Grid，Tree，Form等等。 

在model中怎么样使用这些关联关系，请看 Associations and Validations 示例。 

当然，我们很可能使用非嵌套的方式加载数据。如果你需要“懒加载”(lazy load)相关数据，这可能对你有用。假定返回的数据只有用户数据而不包含任务关联的帖子，像我们以前做的，我们只需要加载用户数据。然后，我们要在回调方法里面调用user.posts().load()方法以获取相关的帖子数据：

// Loads User with ID 1 User's Proxy 
User.load(1, { 
    success: function(user) { 
        console.log("User: " + user.get('name')); 
  
        // Loads posts for user 1 using Post's Proxy 
        user.posts().load({ 
            callback: function(posts, operation) { 
                Ext.each(posts, function(post) { 
                    console.log("Comments for post: " + post.get('title')); 
  
                    post.comments().each(function(comment) { 
                        console.log(comment.get('message')); 
                    }); 
                }); 
            } 
        }); 
    } 
}); 

完整例子请见 Lazy Associations 

验证 

Sencha Touch2的Model对数据验证有丰富的支持。为了证明这一点，我们将创建一些例子来说明。首先，让我们在User model里添加一些验证：

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: ..., 
  
    validations: [ 
        {type: 'presence', name: 'name'}, 
        {type: 'length',   name: 'name', min: 5}, 
        {type: 'format',   name: 'age', matcher: /\d+/}, 
        {type: 'inclusion', name: 'gender', list: ['male', 'female']}, 
        {type: 'exclusion', name: 'name', list: ['admin']} 
    ], 
  
    proxy: ... 
}); 

验证字段定义遵循相同的格式。在每一种情况下，我们指定一个字段和一个类型的验证。在上面的例子中，我们要求name字段的值不能为空并且字符长度最少为5，age字段必须为数字，gender字段的值必须是“male”或者“female”，username可以是admin之外的任意值。有些验证采取额外的可选配置 - 例如长度验证可以使用Min和Max属性，格式可以使用匹配正则表达式等等。Sencha Touch 2内置了5种验证，添加自定义规则也很容易。首先，让我们看看内置的： 

• presence 确保该字段有一个值。0是一个有效的值，但空字符串不是的。
• length 确保一个字符串的长度在最小和最大长度之间。这两个约束是可选的。
• format 确保一个字符串匹配一个正则表达式格式。在上面的例子中，我们必须确保年龄字段是由至少一个以上的数字。
• inclusion 确保一个值是在一个特定值的集合内（例如，确保性别是男或女）。
• exclusion 确保一个值不在一个特定值的集合内（例如，列入黑名单的用户名，如“管理员”）。

现在，我们已经掌握了不同的验证，让我们尝试对用户实例中使用它们。我们将创建一个用户，针对它运行验证，并提示失败信息：

// now lets try to create a new user with as many validation errors as we can 
var newUser = Ext.create('User', { 
    name: 'admin', 
    age: 'twenty-nine', 
    gender: 'not a valid gender' 
}); 
  
// run some validation on the new user we just created 
var errors = newUser.validate(); 
  
console.log('Is User valid?', errors.isValid()); //returns 'false' as there were validation errors 
console.log('All Errors:', errors.items); //returns the array of all errors found on this model instance 
  
console.log('Age Errors:', errors.getByField('age')); //returns the errors for the age field 

这里关键的方法是validate（），它运行所有配置的验证，并返回一个错误对象。这个简单的对象仅仅是一个已找到的所有错误集合，加上一些方便的方法如isValid（），如果所有字段都没有错误则返回true，getByField（）方法返回一个给定字段中的所有错误。 

使用验证的完整示例请见 Associations and Validations 

延伸阅读 

数据只是整个Sencha Touch 2 生态系统的一部分。要了解更多框架内容以及它是怎样工作的，我们建议继续阅读如下文章： 

• Components and Containers
• The Class System
• The Layout System
• Getting Started

原文地址：http://html5mobi.gotoip1.com/discussion/222/sencha-touch-2-sencha-touch2-data-the-data-package

【编辑推荐】

1. Sencha Touch 2.0官方指南:What's new feature?
2. Sencha Touch 2.0官方指南:如何使用组件
3. Sencha Touch 2.0官方指南:如何使用数据视图
4. Sencha Touch 2.0官方指南:如何使用"类"