ExtJS 4.2 教程-04：數據模型

我們在上一節中介紹了如何在ExtJS 中自定義類，這一節中將介紹如何自定義數據模型。

自定義數據模型

在上一節中，我們使用Ext.define 來自定義類，通過Ext.define 定義的類都默認繼承自Ext.base 類。如果我們將extend 設置為Ext.data.Model，那么定義的類就是一個數據模型類了。先定義一個簡單的數據模型類 User類，代碼如下：

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

在代碼中可以看出，數據模型類其實就是一個繼承自Ext.data.Model 的類。

fields 屬性中定義了該模型的字段，它可以是對應到數據庫中的字段。在使用的時候，數據模型包含的字段和類的屬性使用方式不太相同。要訪問字段的值，需要視同get 和 set 方法，例如：

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone:'123456'
});
Tom.set('age', 20);
Ext.MessageBox.alert('提示', Tom.get('age'));

我們實例化User類，初始化的時候，age的值為26，然后通過set 方法設置為 20，再通過get 方法得到 age 字段的值，運行截圖如下：

字段類型和轉換器

在定義數據模型的時候，我們可以定義字段的類型和該類型的轉換器。例如，我們將為User類添加birthday字段，在初始化的時候，我們可能會傳入一個字符串類型的日期格式，這個時侯就需要我們來定義一個類型轉換器，將字符串格式的日期轉換為Date類型。代碼如下：

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' },
        {
            name: 'birthday',
            type: 'date',
 convert: function 

(value, record) { if (Ext.isDate(value)) return value; else if (Ext.isString(value)) { return Ext.Date.parse(value, "Y-m-d"

); } }
        }
    ]
});

在代碼中添加了birthday字段，並為該字段設置了轉換器，當傳入的類型為string時，將會被轉換為標准的時間類型。用法如下：

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone: '123456',
    birthday:'2000-01-15'
});
alert(Tom.get('birthday'));

在使用的時候，傳入的是一個字符串類型的時間，當我們實例化以后，字符串日期被轉換為標准的時間類型：

數據驗證

我們可以使用數據模型來驗證數據是否正確。在上面的例子中，我們希望phone 字段的長度在8和15之間，那么，我們需要這樣修改代碼：

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' },
        {
            name: 'birthday',
            type: 'date',
            convert: function (value, record) {
                if (Ext.isDate(value))
                    return value;
                else if (Ext.isString(value)) {
                    return Ext.Date.parse(value, "Y-m-d");
                }
            }
        }
    ],
 validations: [ { field: 

'phone', type: 'length'

, min: 8, max: 15 } ]
});

為phone 字段添加驗證，驗證類型為length，最小為8，最大為15，驗證的代碼如下：

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone: '123456',
    birthday:'2000-01-15'
});
var errors = Tom.validate();
var errorMsg = [];
if (!errors.isValid()) {
    errors.each(function (error) {
        errorMsg.push(error.field + "   " + error.message);
    });
    Ext.Msg.alert("錯誤", errorMsg.join('<br />'));
}

我們將phone的長度設置為6位，很明顯是不能通過驗證的。程序運行起來以后，我們會得到下面的錯誤：

盡管我們已經引入了漢化包，但這里的提示還是英文的，為了能讓他顯示為中文，我們需要手動的來將其漢化，在程序開始的時候加入代碼：

Ext.data.validations.lengthMessage = "長度錯誤";

刷新我們的頁面，錯誤提示已經變成中文了：

由此可以看出，ExtJS 的驗證錯誤提示是沒有進行漢化的，我們可以將相應的漢化代碼寫在Layout中，方便所有頁面都能夠使用。

自定義驗證規則

ExtJS 中雖然內置了一些驗證規則，但這些規則面對龐大的業務需求肯定是不夠的，所以ExtJS 還允許我們自定義驗證規則。

在User類中，我們希望age字段的值在0到150之間，我們來自定義一個驗證規則：

Ext.apply(Ext.data.validations, {
    ageMessage: '必須在0到150之間',
    age: function (config, value) {
        if (value === undefined || value === null) {
            return false;
        }

        if (value < 0 || value > 150) {
            return false;
        }

        return true;
    }
});

Ext.apply 方法用來將第二個參數中的屬性和方法復制到第一個參數中，在這里的作用是將我們定義的age規則添加到Ext 的驗證規則中。

接下來我們修改驗證部分的代碼，添加age驗證：

validations: [
    { field: 'phone', type: 'length', min: 8, max: 15 },
    { field: 'age', type: 'age', min: 8, max: 15 }
]

在初始化的時候，我們將age的值設置為-26，運行程序，截圖如下：

數據模型之間的關系

（本段內容翻譯自官方api）

模型之間可以通過 Ext.data.association.HasOne, belongsTo 和 hasMany 設置彼此的關系。例如在博客管理程序中，我們需要處理用戶（Users）、文章（Posts）和評論（Comments）之間的關系，他們的關系如下：

Ext.define('Post', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id'],

    belongsTo: 'User',
    hasMany: { model: 'Comment', name: 'comments' }
});

Ext.define('Comment', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id', 'post_id'],

    belongsTo: 'Post'
});

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id'],

    hasMany: [
        'Post',
        { model: 'Comment', name: 'comments' }
    ]
});

你可以通過查看API來了解更多的用法，另外，他們之間的關系還可以這樣定義：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id'],

    associations: [
        { type: 'hasMany', model: 'Post', name: 'posts' },
        { type: 'hasMany', model: 'Comment', name: 'comments' }
    ]
});