[Ext JS]Ext JS数据模型与数据封装| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]Ext JS数据模型与数据封装

## 数据封装总览
页面组件最终需要用来展现数据，对于Ext.form.field.Text和Ext.form.field.TextArea等表单输入框，使用value属性设置值，；对于Grid和Combobox等数据集，Sencha 提供了Store（数据仓库）用于封装数据。
Store相当于数据的集合，那集合里面放置什么类型的数据呢？ Ext JS 使用Model来定义数据类， Model相当于Java等面向对象语言的实体类，但功能比一般的实体类要多，相关部分在后面章节会介绍。数据封装的总览图如下：

### Model ， 数据模型及模型基类（ Ext.data.Model）
Ext.data.Model 是数据模型类的基类， 可以从该类继承定义属于自己的模型类。
模型类包含以下四个部分的内容，如下图：

Fields： 字段，相比原生JS的弱类型，Ext JS支持字符串（String）、整型（Integer)、浮点（Float）和布尔（Boolean）等字段类型。
Associations: 关联， 该模型类和其他类的关系，包括多对一、一对一和一对多的关联。
Validations： 验证器，对该模型类实例的有效性的验证，比如某个字段的值是否能为空、值的格式、长度等限制，也可自行定义验证规则。
Proxy：代理，用于获取数据。实际开发在Model中直接使用Proxy的场景不多见。
自定义模型类
自定义的模型类继承自Ext.data.Model，这里定义一个《三国》中的将军类，包括名字、年龄和所属国三个属性，定义如下：
```javascript
Ext.define('MyApp.Model.General', {  
	extend: 'Ext.data.Model',  
	fields: [       
	{name: 'name', 
	type: 'string'},   
	{name: 'age',  
	type: 'int'}, 
	{name: 'kingdom',
	type: 'string'}  
]}); 
```

在Ext JS应用中， 模型类位于项目的app/model目录下， 类名建议使用 “项目名.Model.类名”，如果类放置在子目录下，可以在类名前加上子目录。这里的类名是MyApp.Model.General。
extend配置项用于指定父类。
fields配置字段，name是字段的名字， type是字段的类型。
创建该类实例的代码如下：
```javascript
var general = Ext.create('MyApp.Model.General', {    //
	id   : '001', 
	name : '刘备',
	age  : 40,   
	kingdom: '蜀'});
console.log(general.get('id')+":"+general.get('name')); //MyApp.Model.General-1:刘备
```

继承Ext.data.Model的模型类默认包含id字段，这个值自动产生，这里是"MyApp.Model.General-1"，也可以指定id的值，如上Mark的部分。
示例地址： http://jsrun.net/HL2Kp/edit
### Store，数据仓库（基类：Ext.data.Store）
模型类的典型使用场景就是Store， Store是某个模型类的记录的集合。Store中的数据来源可以有多种，包括内联数据、本地数据和后端数据。这里简单起见，首先以内联数据为例进行介绍。
内联数据创建Store实例
所谓内联数据就是将一个对象数组赋给Store的data属性，Store会将这些数据转换为model的类型。
类似：
```javascript
var store = new Ext.data.Store({ 
	model: 'MyApp.Model.General', 
	data: [{   
	id: '001',    
	name: "刘备",   
	kingdom: '蜀'    
	}, {   
	id: '002',      
	name: "关羽",   
	kingdom: '蜀'   
	}, {    
	id: '003',   
	name: "张飞",      
	kingdom: '蜀' 
	}, {   
	id: '004', 
	name: '赵云', 
	kingdom: '蜀' 
}]});
```

### 获取Store中的模型实例
```javascript
var icount = store.getCount(); //获取总数
console.log("icount = " + icount); //
icount = 4var record = store.getAt(0); //获取指定位置的模型实例
console.log("name="+record.get("name")); //name=刘备
```

getCount()方法可以获取Store中集合的数量。 如果有分页，则该方法获取的是当页的数量，使用getTotalCount()获取所有。
getAt(index)，获取指定位置的模型实例。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]Ext JS数据模型与数据封装

网站导航