[Ext JS6实战]动态数据绑定| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS6实战]动态数据绑定

## [Ext JS6实战]动态数据绑定
### 问题提出
使用ViewModel的data属性可以绑定数据和视图的显示，类似：
```javascript
data : {
	firstName : ‘chen’,
	lastName : ‘oscar’
}
```
但是如果使用JsonStore 的话，就对应会出现两个问题：
Store对应的是一个数据集合，而不是一个JSON对象。
JSONStore的数据是从服务端获取。
### 问题解决
对于问题1， 使用formulas 从Store的Array获取一个Object后， 通过set设置ViewModel的data属性。
对于问题2， JSONStore会在formulas里方法之后之后才能把数据load完， 所以在执行formulas的方法时，值是空的， 解决方法是通过Store的listeners，在store load完数据之后再进行ModelView的值的设定。
### 实例代码
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); 
}});	
}	 
}	
});
```

说明：
ViewModel可以使用stores设置多个Store，以上userInfo对应到的是Store的Id， 可以通过ViewModel的get()方法得到。
3.data.json
```javascript
{	
"user": {	
"firstName": "Chen",
"lastName": "Oscar"	}}
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6实战]动态数据绑定

网站导航