穿越小说排行榜_[Ext JS6實(shí)戰]動(dòng)態(tài)數據綁定| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS6實(shí)戰]動(dòng)態(tài)數據綁定

## [Ext JS6實(shí)戰]動(dòng)態(tài)數據綁定
### 問(wèn)題提出
使用ViewModel的data屬性可以綁定數據和視圖的顯示，類(lèi)似：
```javascript
data : {
	firstName : ‘chen’,
	lastName : ‘oscar’
}
```
但是如果使用JsonStore 的話(huà)，就對應會(huì )出現兩個(gè)問(wèn)題：
Store對應的是一個(gè)數據集合，而不是一個(gè)JSON對象。
JSONStore的數據是從服務(wù)端獲取。
### 問(wèn)題解決
對于問(wèn)題1， 使用formulas 從Store的Array獲取一個(gè)Object后， 通過(guò)set設置ViewModel的data屬性。
對于問(wèn)題2， JSONStore會(huì )在formulas里方法之后之后才能把數據load完， 所以在執行formulas的方法時(shí)，值是空的， 解決方法是通過(guò)Store的listeners，在store load完數據之后再進(jìn)行ModelView的值的設定。
### 實(shí)例代碼
1.視圖：
MyJsonStoreVMView.js
```javascript
Ext.define('Osxm.main.myJsonStoreVMView', {	
	extend : 'Ext.panel.Panel',
	xtype : 'myJsonStoreVMView',
	layout : 'form',	
	title : 'Hello',	
	viewModel : {	
	type : 'jsonStoreViewModel' // 使用視圖模型的alias屬性："viewmodel.user"	
	},	defaultType : 'textfield',
	items : [ {		
	fieldLabel : 'First Name',
	bind : '{firstName}'	
	}, {	
	fieldLabel : 'Last Name',	
	bind : '{lastName}'	}, {
	xtype : 'button',	
	text : 'Submit'	} 
]});
```

2.視圖模型：
JsonStoreViewModel.js
```javascript
Ext.define('Osxm.view.UserViewModel', {	
extend : 'Ext.app.ViewModel',	
alias : 'viewmodel.jsonStoreViewModel', //	
stores : {	
userInfo : {	
autoLoad:true,		
proxy : {		
type : 'ajax',		
url : '/app/data/data.json',
reader : {			
type : 'json',		
rootProperty : 'user'	
}			
}	
}	
},	  
formulas: {		
user:function(get){		
var vm = this, userInfoStore  = this.get('userInfo');	
get('userInfo').on({load:function(){
//vm.notify();
vm.setData(userInfoStore.first().data);
//vm.set('firstName',userInfoStore.first().data.firstName); 
//vm.set('lastName',userInfoStore.first().data.lastName); 
}});	
}	 
}	
});
```

說(shuō)明：
ViewModel可以使用stores設置多個(gè)Store，以上userInfo對應到的是Store的Id， 可以通過(guò)ViewModel的get()方法得到。
3.data.json
```javascript
{	
"user": {	
"firstName": "Chen",
"lastName": "Oscar"	}}
```

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS6實(shí)戰]動(dòng)態(tài)數據綁定

網(wǎng)站導航