玩转extjs5之Ext.data.Model和Ext.data.Store

玩转extjs5之Ext.data.Model和Ext.data.Store（四）

标签： extjsext

2015-03-19 13:01 1959人阅读 评论(0) 收藏 举报

本文章已收录于：

分类：

extjs（5）

作者同类文章 X

版权声明：本文为博主原创文章，未经博主允许不得转载。

一、Ext.data.Model

       （1）Model代表应用程序管理的一些对象。例如，我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在 模型管理器中注册，被Store使用, 而这些Store又被许多 Ext中许多与数据绑定的组件使用.。

      Model定义为字段、任意方法和与模型相关的属性的集合。例如:

      

[javascript] view plain copy

print ?

1. Ext.define('User', {  
2.     extend: 'Ext.data.Model',  
3.     fields: [  
4.         {name: 'name',  type: 'string'},  
5.         {name: 'age',   type: 'int', convert: null},  
6.         {name: 'phone', type: 'string'},  
7.         {name: 'addree', type: 'string'}  
8.     ],  
9.   
10.     changeName: function() {  
11.         var oldName = this.get('name'),  
12.             newName = oldName + " 六指琴魔";  
13.   
14.         this.set('name', newName);  
15.     }  
16. });  

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int', convert: null},
        {name: 'phone', type: 'string'},
        {name: 'addree', type: 'string'}
    ],

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " 六指琴魔";

        this.set('name', newName);
    }
});

   创建模型User的实例并调用我们定义的任何模型的逻辑:

[javascript] view plain copy

print ?

1. var user = Ext.create('User', {  
2.     name : '六指琴魔',  
3.     age  : 26,  
4.     phone: '13800138000'  
5. });  
6.   
7. user.changeName();  
8. user.get('name');   

var user = Ext.create('User', {
    name : '六指琴魔',
    age  : 26,
    phone: '13800138000'
});

user.changeName();
user.get('name'); 

（2）Model有内置的验证支持, 通过执行Ext.data.validations中的验证器函数给模型添加验证非常简单，例如：

[javascript] view plain copy

print ?

1. Ext.define('User', {  
2.     extend: 'Ext.data.Model',  
3.     fields: [  
4.         {name: 'name',     type: 'string'},  
5.         {name: 'age',      type: 'int'},  
6.         {name: 'phone',    type: 'string'},  
7.         {name: 'gender',   type: 'string'},  
8.         {name: 'username', type: 'string'},  
9.         {name: 'alive',    type: 'boolean', defaultValue: true}  
10.     ],  
11.   
12.     validations: [  
13.         {type: 'presence',  field: 'age'},  
14.         {type: 'length',    field: 'name',     min: 2},  
15.         {type: 'inclusion', field: 'gender',   list: ['Male', 'Female']},  
16.         {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},  
17.         {type: 'format',    field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}  
18.     ]  
19. });  

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',     type: 'string'},
        {name: 'age',      type: 'int'},
        {name: 'phone',    type: 'string'},
        {name: 'gender',   type: 'string'},
        {name: 'username', type: 'string'},
        {name: 'alive',    type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'length',    field: 'name',     min: 2},
        {type: 'inclusion', field: 'gender',   list: ['Male', 'Female']},
        {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
        {type: 'format',    field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
    ]
});

通过调用validate函数能简单执行验证, 返回一个Ext.data.Errors 对象:

[javascript] view plain copy

print ?

1. var instance = Ext.create('User', {  
2.     name: '好源码',  
3.     gender: 'Male',  
4.     username: '六指琴魔'  
5. });  
6.   
7. var errors = instance.validate();  

var instance = Ext.create('User', {
    name: '好源码',
    gender: 'Male',
    username: '六指琴魔'
});

var errors = instance.validate();

二、Ext.data.Store

      （1）Store 大意是: 仓库、存储的意思. Store类封装了一个客户端缓存,用于存储 Model 对象. Stores 通过一个代理 Proxy 来加载数据, 并提供函数来 排序, 过滤 以及查询 内部所包含的 model 实例.
       创建Store非常简单 - 我们只需要传入 Model 以及用来加载/保存 数据的Proxy作为配置项即可:

[javascript] view plain copy

print ?

1. // 建立一个store要使用的 model  
2. Ext.define('User', {  
3.     extend: 'Ext.data.Model',  
4.     fields: [  
5.         {name: 'firstName', type: 'string'},  
6.         {name: 'lastName',  type: 'string'},  
7.         {name: 'age',       type: 'int'},  
8.         {name: 'eyeColor',  type: 'string'}  
9.     ]  
10. });  
11.   
12. var myStore = Ext.create('Ext.data.Store', {  
13.     model: 'User',  
14.     proxy: {  
15.         type: 'ajax',  
16.         url: '/users.json',  
17.         reader: {  
18.             type: 'json',  
19.             root: 'users'  
20.         }  
21.     },  
22.     autoLoad: true  
23. });  

 // 建立一个store要使用的 model
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
     autoLoad: true
 });

（2）内联数据

   Store 也可以加载内部指定的数据. 在内部, Store 将我们传入的对象作为data,转换为Model实例。 示例如下:

[javascript] view plain copy

print ?

1. Ext.create('Ext.data.Store', {  
2.     model: 'User',  
3.     data : [  
4.         {firstName: 'Ed',    lastName: 'Spencer'},  
5.         {firstName: 'Tommy', lastName: 'Maintz'},  
6.         {firstName: 'Aaron', lastName: 'Conran'},  
7.         {firstName: 'Jamie', lastName: 'Avins'}  
8.     ]  
9. });  

 Ext.create('Ext.data.Store', {
     model: 'User',
     data : [
         {firstName: 'Ed',    lastName: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
 });

（3）过滤与排序

    Store 可以进行排序和过滤 - 两种操作既可以在本地执行,也可以远程执行. 排序 sorters 和 过滤 filters 都是在 MixedCollection 实例内部执行的, 这种封装使得容易管理和使用. 通常在 Store的配置项中指定 sorters 和 filters 就可以了,当然也可以调用 sort 和 filter 方法:

[javascript] view plain copy

print ?

1. var store = Ext.create('Ext.data.Store', {  
2.     model: 'User',  
3.     sorters: [{  
4.         property: 'age',  
5.         direction: 'DESC'  
6.     }, {  
7.         property: 'firstName',  
8.         direction: 'ASC'  
9.     }],  
10.   
11.     // 必须包含字母E或者d  
12.     filters: [{  
13.         property: 'firstName',  
14.         value: /Ed/  
15.     }]  
16. });  

 var store = Ext.create('Ext.data.Store', {
     model: 'User',
     sorters: [{
         property: 'age',
         direction: 'DESC'
     }, {
         property: 'firstName',
         direction: 'ASC'
     }],

     // 必须包含字母E或者d
     filters: [{
         property: 'firstName',
         value: /Ed/
     }]
 });

顶

0

踩

0

 

 

• 上一篇玩转Extjs5之使用Ext.define自定义类（三）
• 下一篇玩转extjs5之Ext.data.JsonStore与Ext.data.XmlStore（五）

我的同类文章

extjs（5）

http://blog.csdn.net

• •玩转extjs5之Ext.data.proxy.Ajax（六）2015-03-19阅读686
• •玩转Extjs5之使用Ext.define自定义类（三）2015-03-19阅读400
• •玩转extjs5之extjs初识（一）2014-10-12阅读447

• •玩转extjs5之Ext.data.JsonStore与Ext.data.XmlStore（五）2015-03-19阅读379
• •玩转extjs5之使用Sencha Cmd自动创建extjs5项目（二）2015-03-18阅读823