有声小说下载_[Ext JS]Ext JS數據模型與數據封裝| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS]Ext JS數據模型與數據封裝

## 數據封裝總覽
頁(yè)面組件最終需要用來(lái)展現數據，對于Ext.form.field.Text和Ext.form.field.TextArea等表單輸入框，使用value屬性設置值，；對于Grid和Combobox等數據集，Sencha 提供了Store（數據倉庫）用于封裝數據。
Store相當于數據的集合，那集合里面放置什么類(lèi)型的數據呢？ Ext JS 使用Model來(lái)定義數據類(lèi)， Model相當于Java等面向對象語(yǔ)言的實(shí)體類(lèi)，但功能比一般的實(shí)體類(lèi)要多，相關(guān)部分在后面章節會(huì )介紹。數據封裝的總覽圖如下：

### Model ， 數據模型及模型基類(lèi)（ Ext.data.Model）
Ext.data.Model 是數據模型類(lèi)的基類(lèi)， 可以從該類(lèi)繼承定義屬于自己的模型類(lèi)。
模型類(lèi)包含以下四個(gè)部分的內容，如下圖：

Fields： 字段，相比原生JS的弱類(lèi)型，Ext JS支持字符串（String）、整型（Integer)、浮點(diǎn)（Float）和布爾（Boolean）等字段類(lèi)型。
Associations: 關(guān)聯(lián)， 該模型類(lèi)和其他類(lèi)的關(guān)系，包括多對一、一對一和一對多的關(guān)聯(lián)。
Validations： 驗證器，對該模型類(lèi)實(shí)例的有效性的驗證，比如某個(gè)字段的值是否能為空、值的格式、長(cháng)度等限制，也可自行定義驗證規則。
Proxy：代理，用于獲取數據。實(shí)際開(kāi)發(fā)在Model中直接使用Proxy的場(chǎng)景不多見(jiàn)。
自定義模型類(lèi)
自定義的模型類(lèi)繼承自Ext.data.Model，這里定義一個(gè)《三國》中的將軍類(lèi)，包括名字、年齡和所屬?lài)齻€(gè)屬性，定義如下：
```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應用中， 模型類(lèi)位于項目的app/model目錄下， 類(lèi)名建議使用 “項目名.Model.類(lèi)名”，如果類(lèi)放置在子目錄下，可以在類(lèi)名前加上子目錄。這里的類(lèi)名是MyApp.Model.General。
extend配置項用于指定父類(lèi)。
fields配置字段，name是字段的名字， type是字段的類(lèi)型。
創(chuàng  )建該類(lèi)實(shí)例的代碼如下：
```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的模型類(lèi)默認包含id字段，這個(gè)值自動(dòng)產(chǎn)生，這里是"MyApp.Model.General-1"，也可以指定id的值，如上Mark的部分。
示例地址： http://jsrun.net/HL2Kp/edit
### Store，數據倉庫（基類(lèi)：Ext.data.Store）
模型類(lèi)的典型使用場(chǎng)景就是Store， Store是某個(gè)模型類(lèi)的記錄的集合。Store中的數據來(lái)源可以有多種，包括內聯(lián)數據、本地數據和后端數據。這里簡(jiǎn)單起見(jiàn)，首先以?xún)嚷?lián)數據為例進(jìn)行介紹。
內聯(lián)數據創(chuàng  )建Store實(shí)例
所謂內聯(lián)數據就是將一個(gè)對象數組賦給Store的data屬性，Store會(huì )將這些數據轉換為model的類(lèi)型。
類(lèi)似：
```javascript
var store = new Ext.data.Store({ 
	model: 'MyApp.Model.General', 
	data: [{   
	id: '001',    
	name: "劉備",   
	kingdom: '蜀'    
	}, {   
	id: '002',      
	name: "關(guān)羽",   
	kingdom: '蜀'   
	}, {    
	id: '003',   
	name: "張飛",      
	kingdom: '蜀' 
	}, {   
	id: '004', 
	name: '趙云', 
	kingdom: '蜀' 
}]});
```

### 獲取Store中的模型實(shí)例
```javascript
var icount = store.getCount(); //獲取總數
console.log("icount = " + icount); //
icount = 4var record = store.getAt(0); //獲取指定位置的模型實(shí)例
console.log("name="+record.get("name")); //name=劉備
```

getCount()方法可以獲取Store中集合的數量。 如果有分頁(yè)，則該方法獲取的是當頁(yè)的數量，使用getTotalCount()獲取所有。
getAt(index)，獲取指定位置的模型實(shí)例。

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS]Ext JS數據模型與數據封裝

網(wǎng)站導航