我欲封天耳根小说_[Ext JS4] 數據包| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS4] 數據包

## [Ext JS4] 數據包
### 數據
Ext  JS的data包有41個(gè)類(lèi)，最重要的就是Model,Store 和Ext.data.proxy.Proxy這三個(gè)了。

### Models 和 Stores
Ext.data.Model是數據包的核心。一個(gè)Model代表應用程序的一些類(lèi)型的數據。比如，一個(gè)電子商務(wù)應用程序可能含有 User,Products 和Orders 這樣的Model.最簡(jiǎn)單的Model就是一組字段和值。這里著(zhù)重介紹Model的四個(gè)基本的組成部分-Fields,Proxies,Associations 和 validations.

來(lái)看看如何定義一個(gè)model 的簡(jiǎn)單示例：
```javascript
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});
```

Model 定義之后如何使用呢？ Model 最典型的是被一個(gè)Stroe使用, 以下是創(chuàng  )建一個(gè)store 和加載數據的例子：
```javascript
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
        url : 'users.json',
reader: 'json'
    },
autoLoad: true
});
```
這里使用Ajax Proxy 作為Store的數據源，配置了url 和  Reader(用于解碼數據)。
這個(gè)Store 自動(dòng)通過(guò)url(user.json)從服務(wù)端加載model 為User 的數據，服務(wù)端返回的JSON數據應該是如下格式：
```javascript
{
    success: true,
    users: [
        { id: 1, name: 'Ed' },
        { id: 2, name: 'Tommy' }
    ]
}
```

### 內聯(lián)數據
Stores 也可以?xún)嚷?lián)的方式加載數據。Store 回把傳入的數據轉換成 model, 如：
```javascript
Ext.create('Ext.data.Store', {
model: 'User',
data: [
        { firstName: 'Ed',    lastName: 'Spencer' },
        { firstName: 'Tommy', lastName: 'Maintz' },
        { firstName: 'Aaron', lastName: 'Conran' },
        { firstName: 'Jamie', lastName: 'Avins' }
    ]
});
```

### 排序和分組
類(lèi)似遠端服務(wù)器的排序，過(guò)濾和分組，Stores 也可以在本地客戶(hù)端進(jìn)行排序，過(guò)濾和分組。
```javascript
Ext.create('Ext.data.Store', {
model: 'User',
sorters: ['name', 'id'],
filters: {
property: 'name',
        value   : 'Ed'
    },
groupField: 'age',
groupDir: 'DESC'
});
```
在這個(gè)例子中，這個(gè)store先用name排序，再用  id排序。 只包含name="Ed"的數據，用age欄位逆序排列。

### 代理
Proxies（代理）用來(lái)處理加載和保存Model 數據。有兩種類(lèi)型的代理： 客戶(hù)端的和服務(wù)端的?？蛻?hù)端代理的例子有使用瀏覽器緩存來(lái)存儲數據和使用HTML 5本地存儲特性來(lái)進(jìn)行的本地存儲。服務(wù)端代理處理遠端服務(wù)器返回的數據，比如Ajax,JsonP  和Rest.
代理可以直接定義在一個(gè)Model上， 像：
```javascript
Ext.define('User', {
extend: 'Ext.data.Model',
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'
});
```
這樣做有兩個(gè)好處：
首先是這樣的寫(xiě)法保證了所有使用User 這個(gè)Model的Store 都以同樣的方式加載數據，避免在每個(gè)Store中重復定義Proxy;
其次，這樣寫(xiě)可以在不使用store的狀況下，加載和保存Model 數據。如下例
// Gives us a reference to the User class
```javascript
varUser = 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 this will automatically send a POST request to the url /users
```
```javascript
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'));
    }
});
```

LocalStorage 和SessionStorage. (HTML5相關(guān)的本地存儲)

### 關(guān)聯(lián)（Associations）
可以使用關(guān)聯(lián)的API 建立Models之間的關(guān)系。大多數的應用程序都有很多模型，而且模型之間基本上都是有關(guān)聯(lián)的。舉博客程序這樣的例子來(lái)說(shuō)，每個(gè)用戶(hù)可以發(fā)表多篇博文：
```javascript
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'rest',
        url : 'data/users',
reader: {
type: 'json',
root: 'users'
        }
    },
hasMany: 'Post'// shorthand for { model: 'Post', name: 'posts' }
});
Ext.define('Post', {
extend: 'Ext.data.Model',
fields: ['id', 'user_id', 'title', 'body'],
proxy: {
type: 'rest',
        url : 'data/posts',
reader: {
type: 'json',
root: 'posts'
        }
    },
belongsTo: 'User',
hasMany: { model: 'Comment', name: 'comments' }
});
Ext.define('Comment', {
extend: 'Ext.data.Model',
fields: ['id', 'post_id', 'name', 'message'],
belongsTo: 'Post'
});
定義完成之后，在模型實(shí)例中就很容易能得到這些關(guān)聯(lián)數據：如
// 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'));
            });
        });
    }
});
```

以上是獲取關(guān)聯(lián)數據的例子，除了獲取之外，也可以創(chuàng  )建數據
```javascript
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();
```

也可以如下方法使用：
```javascript
// 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');
        }
    }
});

```

### 加載嵌套數據
關(guān)聯(lián)數據也可以直接使用以下方式：

```javascript
{
success: true,
users: [
        {
id: 1,
name: 'Ed',
age: 25,
gender: 'male',
posts: [
                {
                    id   : 12,
title: 'All about data in Ext JS 4',
                    body : 'One areas that has seen the most improvement...',
comments: [
                        {
id: 123,
name: 'S Jobs',
message: 'One more thing'
                        }
                    ]
                }
            ]
        }
    ]
}

```

框架會(huì )自動(dòng)的解析這個(gè)數據。

### 驗證

還是用上面User 模型為例：
```javascript
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ...,
validations: [
        {type: 'presence', name: 'name'},
        {type: 'length',   name: 'name', min: 5},
        {type: 'format',   name: 'age', matcher: /\d+/},
        {type: 'inclusion', name: 'gender', list: ['male', 'female']},
        {type: 'exclusion', name: 'name', list: ['admin']}
    ],
proxy: ...
});
```

presence -- 非空判斷。0 是合法值，空字串不是。

inclusion: -- 一組特定的值

定義完成之后，如何使用：
```javascript
// 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

```

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS4] 數據包

網(wǎng)站導航