使用模型

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

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

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

使用代理

存储使用代理来处理模型数据的加载和保存。代理有两种类型：客户端和服务器端。客户端代理的示例包括 Memory（用于将数据存储在浏览器的内存中）和 Local Storage（在可用时使用 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 链接在一起。大多数应用程序处理许多不同的模型，并且模型几乎总是相关的。博客创作应用程序可能具有 User、Post 和 Comment 的模型。每个用户创建帖子，每个帖子接收评论。我们可以将这些关系表示为以下示例所示

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 模型都有许多 Posts，这添加了上面代码片段中使用的 user.posts() 函数。调用 user.posts() 返回一个配置了 Post 模型的 Store。反过来，由于我们设置了 hasMany Comments 关联，Post 模型获得了 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 方法更新 foreign_key（在本例中为 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 可以采用 matcher，等等。Sencha Touch 内置了五个验证，添加自定义规则很容易。

内置以下验证

• presence 确保字段具有值。零算作有效值，但空字符串不算。
• length 确保字符串的长度介于最小值和最大值之间。这两个约束都是可选的。
• format 确保字符串与正则表达式格式匹配。在上面的示例中，我们确保 age 字段是一个数字。
• inclusion 确保值在特定值集内（例如，我们确保 gender 是男性或女性）。
• 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()（返回给定字段的所有错误）。