ExtJs4.0的 数据模型刨析（Anatomy of a model）

本文翻译于extjs官方博客http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model关于extjs4.0数据模型的文章。

       如果你遵循Ext JS,可能你已经知道,我们有一个全新的数据计划Ext JS 4。新的数据模型方案建立在extjs3.0的基础上同时又加入了大量的新的功能，我们最近推出的新的数据包

       在我们的博客，今天我们要采取更深入地了解新的模型类。

       模型表示几乎任何类型的持久化的数据在应用程序中。例如，一个电子商务应用程序可能有用户，产品，订单等的模型。每个模型包含的一组字段以及功能，使应用程序能够操作其数据模型，例如订单模型可能有一个'shipToCustomer“配送功能函数。

       Ext JS的3.x和之前有一类被称为记录，这是非常相似的新的模型类。所不同的是，而记录是唯一的领域和功能，型号更加强大。今天，我们要去看看fields，proxy，Associations和validations四个模型的主要功能。

 

 

 

Fields

每一个模型由一个或多个字段。简单地说，一个字段只是一个名字：“ID”，“电子邮件”和“手机”都可能是用户模型领域。字段也可以做更多的事情。他们可以有一个类型（整数int，浮点数float，字符串string或自动auto），甚至修改它们的值的转换功能，当设置。例如，如果我们记录我们用户的高度，我们可以有一个功能，将它从英寸换算成厘米。

下面是我们如何将成立一个简单的用户模型有三个领域。对于第一个Field，我们将指定类型int'，它应该是一个整数。对于第二个Field，我们不会指定其类型，这意味着它将使用默认情况下，“自动auto”类型。auto类型将接受任何类型值。对于第三个Filed，我们将指定类型int，还提供了一个将英寸转换为厘米的功能函数：

Ext.regModel('User', {
    fields: [
        {name: 'id', type: 'int'},
        'name',
        {
            name: 'height',
            type: 'int',
            convert: function(inches) {
                return Math.round(inches * 2.54);
            }
        }
    ]
});

可以很容易地创建一个新的用户实例字段定义如何影响到他们的数据，我们通过：

 
var abe = new User({
    id: 123,
    name: 'Abe Elias',
    height: 76
});
 
console.log(abe.get('id')); //logs 123 (a JavaScript Number object)
console.log(abe.get('name')); //logs 'Abe Elias' (A JavaScript String object)
console.log(abe.get('height')); //logs 193 (inches converted to centimeters)

 

 使用简单的实例模型是很容易的，但通常一个应用程序需要加载load和保存save数据。对于这一点，我们就要用到代理proxy。

 

 

 

 

Proxy

在Ext JS 4，代理是负责从一些来源加载和保存数据。这可以通过AJAX，使用HTML5的localStorage甚至干脆保持内存中的数据。Ext JS.4.0在默认情况下配备了一套代理功能，但自己创建也很容易。让我们看看如何为我们的用户模型设置一个代理：

 
Ext.regModel('User', {
    fields: ['id', 'name', 'email'],
 
    proxy: {
        type: 'rest',
        url : '/users',
        reader: 'json'
    }
});

 直接在模型定义代理第4版是一种新方法，它的主要好处是，我们可以很容易地加载和保存，而无需像在Ext JS 3里一样要创建一个store来处理。

上面我们设置的用户模型使用RestProxy。这个proxy使用AJAX调用其数据从服务器加载和保存，这就会让他知道自动给出的一个url（'/user“在这个例子中）建立连接。我们设置了JsonReader方式的proxy，它可以服务器的响应和解码成用户模型实例。在这个例子中，我们的服务器响应返回时设置JSON数据格式，所以用JsonReader读取。

现在加载了一个用户模型：

 
//GET /users/123
User.load(123, {
    success: function(user) {
        console.log(user.get('name'));
    }
});

上面的代码在的URL / users/123中加载数据，根据ID将相应数据传递给User.load。然后，它使用JsonReader对响应数据进行解码存储到用户对象。我们的服务器发送回一个响应，这样，这将使上面代码控制端输出日志为“Aaron Conran”：

//response from GET /users/123
{
    "id": 123,
    "name": "Aaron Conran",
    "email": "aaron@sencha.com"
}

 很容易吧，那我们现在讲下一个模型关联（association）。

 

 

 

Associations

我们通常在应用程序中有很多的模型，但它们可能都不是单独无关联的。在这个商务系统中的模型之间的关系就是，每个用户可以有多个订单，每个订单由订单项目组成。Ext JS.4为我们提供了一个简单而直观的 Association API能够表示这些关系，在客户端上。让我们来看看我们如何设置这三个模型：

 
//each User hasMany Orders
Ext.regModel('User', {
    fields: ['id', 'name', 'email'],
    proxy : {
        type: 'rest',
        url : '/users',
        reader: 'json'
    },
 
    hasMany: 'Orders'
});
 
//each Order belongsTo a User, and hasMany OrderItems
Ext.regModel('Order', {
    fields: ['id', 'user_id', 'status'],
    belongsTo: 'User',
    hasMany: 'OrderItems'
});
 
//each OrderItem belongsTo an Order
Ext.regModel('OrderItem', {
    fields: ['id', 'order_id', 'name', 'description', 'price', 'quantity'],
    belongsTo: 'Order'
});
 

现在我们的应用程序知道它的模型和他们的关联，我们把他们综合用一下，从上述代理区域扩展的例子，服务器响应数据是这个样子的：

 
{
    "id": 123,
    "name": "Aaron Conran",
    "email": "aaron@sencha.com",
    "orders": [
        {
            "id": 1,
            "status": "shipped",
            "orderItems": [
                {
                    "id": 2,
                    "name": "Sencha Touch",
                    "description": "The first HTML5 mobile framework",
                    "price": 0,
                    "quantity": 1
                }
            ]
        }
    ]
}
 

 当我们现在加载用户数据时候，相关联的订单order和订单条目OrderItems与它一起加载进来，使我们能够在代码中与它们进行交互：

 User.load(123, {
    success: function(user) {
        console.log(user.get('name')); //"Aaron Conran"
        console.log(user.orders().getCount()); //"1" -- there is only 1 order in the response above
 
        //we can iterate over the orders easily using the Associations API
        user.orders().each(function(order) {
            console.log(order.get('status')); //"shipped"
 
            //we can even iterate over each Order's OrderItems:
            order.orderItems().each(function(orderItem) {
                console.log(orderItem.get('title')); //"Sencha Touch"
            });
        });
    }
});

 Association API 是Ext JS的最强大的新功能之一，由于数据包在Sencha Touch共享，你可以在Sencha Touch下载得到它先睹为快。

 

 

 

Validations 

我们要看看今天的最后一个新功能是验证。在Ext JS 3，唯一验证表现在对表单验证中。在以上的例子中，我们没有在表单中操作数据，所以我们需要在数据模型能够验证。值得庆幸的是，Ext JS支持这种验证，让我们来看看：

 
Ext.regModel('User', {
    fields: ['id', 'name', 'email', 'height'],
 
    validations: [
        {type: 'presence', field: 'id'},
        {type: 'length', field: 'name', min: 2},
        {type: 'format', field: 'email', matcher: /[a-z]@[a-z].com/}
    ]
});

 我们建立了三个简单的验证我们的用户模式。首先，'ID'字段必须存在，还有，'名称'字段必须是至少2个字符长，最后我们用一个非常简单的正则表达式匹配的“电子邮件”字段的格式。

我们可以使用这些验证，以确保我们的模型中的数据是正确的。在这里，我们创建了一个新的用户没有一个有效的名字和缺少一个ID，并请它自己验证：

 
var ed = new User({
    email: "ed@sencha.com"
});
 
var validation = ed.validate();
 
console.log(validation.isValid()); //false
 
//we can easily output or manipulate any validation errors
validation.each(function(error) {
    console.log(error.field + " " + error.message);
});
 
//in this case, the output looks like this:
"id must be present"
"name is the wrong length"