使用模型

最简单地说，模型只是一组字段及其数据。在本指南中，我们将研究 Ext.data.Model 的四个主要部分——字段、代理、关联和验证。

以下代码示例说明了模型的创建

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

使用代理

代理由存储区用于处理模型数据的加载和保存。有两种类型的代理：客户端和服务器。客户端代理的示例包括用于在浏览器的内存中存储数据的内存和在可用时使用 HTML 5 本地存储功能的本地存储。服务器代理处理将数据封送至某个远程服务器，示例包括 Ajax、JsonP 和 Rest。

代理可以直接在模型中定义，如下面的代码示例所示

Ext.define('User', {

    extend: 'Ext.data.Model',

    config: {
        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 模型的每个存储区很可能需要以相同的方式加载其数据，因此我们避免了为每个存储区复制代理定义。其次，我们可以在不调用存储区的情况下加载和保存模型数据

// 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 which 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'));
    }
});

还有一些代理利用了 HTML5 的新功能——LocalStorage和SessionStorage。虽然较旧的浏览器不支持这些新的 HTML5 API，但它们非常有用，很多应用程序将通过使用它们受益匪浅。

关联

可以使用关联 API 将模型链接在一起。大多数应用程序处理许多不同的模型，并且这些模型几乎总是相关的。博客创作应用程序可能具有用于用户、帖子和评论的模型。每个用户创建帖子，每个帖子接收评论。我们可以按以下示例所示表达这些关系

Ext.define('User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'name'],
        proxy: {
            type: 'rest',
            url : 'data/users',
            reader: {
                type: 'json',
                root: 'users'
            }
        },

        hasMany: 'Post' // shorthand for { model: 'Post', name: 'posts' }
    }
});

Ext.define('Comment', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['id', 'post_id', 'name', 'message'],
        belongsTo: 'Post'
    }
});

Ext.define('Post', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['id', 'user_id', 'title', 'body'],

        proxy: {
            type: 'rest',
            url : 'data/posts',
            reader: {
                type: 'json',
                root: 'posts'
            }
        },
        belongsTo: 'User',
        hasMany: { model: 'Comment', name: 'comments' }
    }
});

正如此示例所示，在应用程序中表达不同模型之间的丰富关系很容易。每个模型都可以与其他模型具有任意数量的关联，并且可以按任何顺序定义模型。一旦拥有模型实例，就可以轻松遍历关联数据。例如，要记录针对给定用户的每个帖子发表的所有评论，请使用以下示例中的代码

// 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'));
            });
        });
    }
});

我们在上面创建的每个 hasMany 关联都会自动向模型添加一个新函数。我们声明每个 User 模型都有许多帖子，这添加了上面代码段中使用的 user.posts() 函数。调用 user.posts() 会返回使用 Post 模型配置的存储区。反过来，Post 模型会获得一个 comments() 函数，因为我们已经设置了 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，然后调用 sync() 通过其配置的代理保存新 Post。这是一个异步操作，您可以向其传递回调，如果您希望在操作完成后收到通知。

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 模型。和往常一样，您可以传入回调，这些回调将在保存操作完成时触发，无论是否成功。

验证

模型具有丰富的支持来验证其数据。为了演示这一点，我们基于前面说明关联的示例。首先，让我们向 User 模型添加一些验证

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: [
            // ...
        ]
    }
});

验证遵循与字段定义相同的格式。在每种情况下，我们指定一个字段和一种验证类型。我们示例中的验证期望 name 字段存在且长度至少为五个字符，age 字段为数字，gender 字段为“male”或“female”，username 为除“admin”之外的任何内容。一些验证需要其他可选配置 - 例如，length 验证可以采用 min 和 max 属性，format 可以采用匹配器，依此类推。Sencha Touch 中内置了五种验证，添加自定义规则很容易。

内置了以下验证

• presence 确保字段有值。零计为有效值，但空字符串不计。
• length 确保字符串的长度介于最小值和最大值之间。两个约束都是可选的。
• format 确保字符串与正则表达式格式匹配。在上面的示例中，我们确保 age 字段为数字。
• inclusion 确保值在特定值集内（例如，我们确保 gender 为 male 或 female）。
• exclusion 确保值不在特定值集内（例如，我们可以将用户名“admin”列入黑名单）。

现在我们已经了解了不同的验证，让我们使用它们来验证 User 实例。在以下示例中，我们创建一个用户实例并针对它运行验证，注意任何失败

// 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()，它运行所有配置的验证并返回一个 errors 对象。此简单对象是找到的任何错误的集合，加上一些方便的方法，例如 isValid()，如果任何字段没有错误，则返回 true，以及 getByField()，它返回给定字段的所有错误。