数据包

数据包是加载和保存应用程序中所有数据的组件。它包含许多类，但其中三个比其他所有类都更重要。

这些类是

• Ext.data.Model
• 存储
• Ext.data.proxy.Proxy

以上类几乎被所有应用程序使用。它们由许多卫星类支持。

模型

数据包的核心是 Ext.data.Model。模型代表应用程序中的实体。例如，一个电子商务应用程序可能拥有用户、产品和订单的模型。在最简单的层面上，模型定义了一组字段和相关的业务逻辑。

让我们看一下模型的一些主要部分

• 字段
• 代理
• 验证
• 关联

创建模型

通常最好从一个通用的基类开始定义你的模型。这个基类允许你轻松地在一个地方为所有模型配置某些方面。它也是配置模式的好地方。模式是应用程序中所有模型的管理器。现在我们将重点关注它两个最实用的配置选项

Ext.define('MyApp.model.Base', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'id',
        type: 'int'
    }],

    schema: {
        namespace: 'MyApp.model',  // generate auto entityName

        proxy: {     // Ext.util.ObjectTemplate
            type: 'ajax',
            url: '{entityName}.json',
            reader: {
                type: 'json',
                rootProperty: '{entityName:lowercase}'
            }
        }
    }
});

模型基类的适当内容，尤其是它的“字段”，可能在不同的应用程序之间有所不同。

代理

代理 由 模型 和 存储 用于处理模型数据的加载和保存。代理有两种类型：客户端和服务器。

代理可以在模型基类的模式上直接定义（如上所示）。

客户端代理

客户端代理的示例包括 内存 和 本地存储，它使用 HTML5 本地存储功能。虽然旧的浏览器不支持这些新的 HTML5 API，但它们非常有用，很多应用程序将从它们的存在中受益匪浅。

服务器代理

服务器代理处理数据到远程服务器的编组。这种类型的代理的示例包括 AJAX、JSONP 和 REST。

模式

模式 是一个实体集合，它们之间存在关联。当一个模型指定一个“模式”配置时，该模式将被所有派生模型继承。在上面的示例中，模式已配置了两个值，它们为该模式中的所有模型建立了默认值。

这些配置中的第一个是“命名空间”。通过指定这个命名空间，所有模型都获得一个简短的名称，称为“实体名称”。这个简短的名称主要在定义模型之间的关联时有用，我们将在后面看到。

示例模式还定义了一个“代理”配置。这是一个对象模板，类似于基于 Ext.XTemplate 的文本模板。区别在于对象模板在给定数据时会生成对象。在这种情况下，该数据用于自动定义所有未明确定义代理的模型的“代理”配置。

这非常有用，因为每个模型实例都可能需要以相同的方式加载其数据，但值略有不同。这避免了为每个模型重复定义代理。

我们在 URL 中指定的 User.json，url: '{entityName}.json'，应该返回一个 JSON 字符串。

对于这个示例，我们使用了这个

{
  "success": "true",
  "user": [
    {
      "id": 1,
      "name": "Philip J. Fry"
    },
    {
      "id": 2,
      "name": "Hubert Farnsworth"
    },
    {
      "id": 3,
      "name": "Turanga Leela"
    },
    {
      "id": 4,
      "name": "Amy Wong"
    }
  ]
}

存储

模型通常与存储一起使用，存储基本上是记录（模型派生类的实例）的集合。创建存储并加载其数据很简单

var store = new Ext.data.Store ({
    model: 'MyApp.model.User'
});

store.load({
    callback:function(){
        var first_name = this.first().get('name');
         console.log(first_name);
    }
});

我们正在手动加载存储以接收一组 MyApp.model.User 记录。当存储加载的回调函数被触发（完成时）时，记录将被记录。

内联数据

存储也可以内联加载数据。在内部，存储将我们作为 data 传入的每个对象转换为适当的 模型 类型的记录

new Ext.data.Store({
    model: 'MyApp.model.User',
    data: [{
        id: 1,
        name: "Philip J. Fry"
    },{
        id: 2,
        name: "Hubert Farnsworth"
    },{
        id: 3,
        name: "Turanga Leela"
    },{
        id: 4,
        name: "Amy Wong"
    }]
});

排序和分组

存储能够在本地和远程执行排序、过滤和分组。

new Ext.data.Store({
    model: 'MyApp.model.User',

    sorters: ['name','id'],
    filters: {
        property: 'name',
        value   : 'Philip J. Fry'
    }
});

在这个存储中，数据将首先按名称排序，然后按 ID 排序。数据将被过滤，只包含名为“Philip J. Fry”的用户。可以通过存储的 API 随时轻松更改这些项目的属性。

关联

模型可以通过关联 API 链接在一起。大多数应用程序都处理许多不同的模型，并且这些模型几乎总是相关的。一个博客撰写应用程序可能具有 User 和 Post 模型。每个 User 创建 Posts。因此，在这种情况下，一个用户可以拥有多个帖子，但一个帖子只会有一个 User 创建它。这被称为多对一关系。我们可以这样表达这种关系

Ext.define('MyApp.model.User', {
    extend: 'MyApp.model.Base',

    fields: [{
        name: 'name',
        type: 'string'
    }]
});

Ext.define('MyApp.model.Post', {
    extend: 'MyApp.model.Base',

    fields: [{
        name: 'userId',
        reference: 'User', // the entityName for MyApp.model.User
        type: 'int'
    }, {
        name: 'title',
        type: 'string'
    }]
});

在您的应用程序中表达不同模型之间的丰富关系很容易。每个模型可以与其他模型建立任意数量的关联。此外，您的模型可以按任何顺序定义。一旦您拥有此模型类型的记录，就可以轻松地遍历关联数据。例如，如果您想获取用户的全部帖子，您可以执行以下操作

// Loads User with ID 1 and related posts and comments
// using User's Proxy
MyApp.model.User.load(1, {
    callback: function(user) {
        console.log('User: ' + user.get('name'));

        user.posts(function(posts){
            posts.each(function(post) {
                console.log('Post: ' + post.get('title'));
            });
        });
    }
});

上面的关联导致在模型中添加了一个新函数。每个 User 模型都有许多 Posts，这添加了我们使用的 user.posts() 函数。调用 user.posts() 返回一个使用 Post 模型配置的 Store。

关联不仅有助于加载数据。它们对于创建新记录也很有用

user.posts().add({
    userId: 1,
    title: 'Post 10'
});

user.posts().sync();

这将实例化一个新的 Post，该 Post 会自动在 userId 字段中获得 User 的 ID。调用 sync() 通过其代理（最终由模式的代理配置定义）保存新的 Post。这是一个异步操作，您可以传递回调函数，如果您希望在操作完成时收到通知。

关联的“反向”也会在 Post 模型上生成新方法

MyApp.model.Post.load(1, {
    callback: function(post) {

        post.getUser(function(user) {
            console.log('Got user from post: ' + user.get('name'));
        });                           
    }
});

MyApp.model.Post.load(2, {
    callback: function(post) {
        post.setUser(100);                         
    }
});

加载函数 getUser() 是异步的，需要一个回调函数来获取用户实例。setUser() 方法只是将 userId（有时称为“外键”）更新为 100 并保存 Post 模型。像往常一样，可以传入回调函数，这些回调函数将在保存操作完成后触发 - 无论成功与否。

加载嵌套数据

当定义关联时，加载记录的行为也可以在单个请求中加载关联记录。例如，考虑以下服务器响应

{
    "success": true,
    "user": [{
        "id": 1,
        "name": "Philip J. Fry",
        "posts": [{
            "title": "Post 1"
        },{
            "title": "Post 2"
        },{
            "title": "Post 3"
        }]
    }]
}

框架可以自动解析单个响应中的嵌套数据，例如上面的数据。我们无需为 User 数据发出一个请求，为 Posts 数据发出另一个请求，而可以将所有数据返回到单个服务器响应中。

验证

模型还提供大量支持来验证数据。为了演示，我们将基于上面使用的示例。首先，让我们在 User 模型中添加一些验证

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ...,

    validators: {
        name: [
            'presence',
            { type: 'length', min: 7 },
            { type: 'exclusion', list: ['Bender'] }
        ]
    }
});

验证器定义为一个对象，该对象以字段名称为键，映射到定义有效字段的规则。这些规则表示为验证器对象配置或这些配置的数组。我们示例中的验证器验证 name 字段，该字段的长度应至少为 7 个字符，并且该值应为除“Bender”以外的任何值。

一些验证需要额外的可选配置 - 例如，长度验证可以接受 min 和 max 属性，格式可以接受匹配器等。Ext JS 中内置了五个验证，添加自定义规则也很容易。

首先，让我们认识一下内置的验证

• 存在 - 确保字段具有值。零被视为有效值，但空字符串则不被视为有效值。
• 长度 - 确保字符串的长度介于最小长度和最大长度之间。这两个约束都是可选的。
• 格式 - 确保字符串与正则表达式格式匹配。在上面的示例中，我们确保 age 字段仅包含数字。
• 包含 - 确保值在特定值集中（例如，确保性别为男性或女性）。
• 排除 - 确保值不是特定值集中的一个值（例如，将“admin”等用户名列入黑名单）。

现在我们已经了解了不同的验证，让我们尝试对 User 实例使用它们。我们将创建一个用户并对其运行验证，并注意任何错误

// now lets try to create a new user with as many validation
// errors as we can
var newUser = new MyApp.model.User({
    id: 10,
    name: 'Bender'
});

// run some validation on the new user we just created
console.log('Is User valid?', newUser.isValid());

//returns 'false' as there were validation errors

var errors = newUser.getValidation(),
    error  = errors.get('name');

console.log("Error is: " + error);

这里的关键函数是 getValidation()，它运行所有配置的验证并返回一个记录，该记录由每个字段的第一个出现的错误填充，或者对于有效字段填充布尔值 true。验证记录是延迟创建的，并且仅在请求时更新。

在这种情况下，第一个错误向我们显示：name 字段上的“长度必须大于 7”。

所以让我们提供一个包含超过 7 个字符的名称。

newUser.set('name', 'Bender Bending Rodriguez');
errors = newUser.getValidation();

此用户记录现在满足所有验证条件。该记录存在，包含超过 7 个字符，并且姓名不匹配 Bender。

newUser.isValid() 现在将返回 true。当我们调用 getValidation() 时，验证记录将被更新，不再是脏数据，并且所有字段都将设置为 true。