版权声明：本文为博主原创文章，未经博主允许不得转载。
一、Ext.data.Model
（1）Model代表应用程序管理的一些对象。例如，我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在 模型管理器中注册，被Store使用, 而这些Store又被许多 Ext中许多与数据绑定的组件使用.。
Model定义为字段、任意方法和与模型相关的属性的集合。例如:
[javascript] view plain copy print ? 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); } }); 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 ? var user = Ext.create('User', { name : '六指琴魔', age : 26, phone: '13800138000' }); user.changeName(); 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 ? 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}/} ] }); 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 ? var instance = Ext.create('User', { name: '好源码', gender: 'Male', username: '六指琴魔' }); 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 ? // 建立一个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 }); // 建立一个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 ? Ext.create('Ext.data.Store', { model: 'User', data : [ {firstName: 'Ed', lastName: 'Spencer'}, {firstName: 'Tommy', lastName: 'Maintz'}, {firstName: 'Aaron', lastName: 'Conran'}, {firstName: 'Jamie', lastName: 'Avins'} ] }); 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 ? 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/ }] }); 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（五）
