EXT viewModel绑定数据并切换 grid列排序事件

1，效果如图



2，思路

通过viewModel 绑定data 和 store  切换数据即可

3，view

/**
* Created by Sukla on 2017/12/25.
*/
Ext.define('app.view.common.tabViewModel.TabViewModelView', {
extend: 'Ext.panel.Panel',
alias: 'widget.tabViewModelView',
controller: 'tabViewModelController',
cls:'tab-view-model-view',
layout: {
type: 'border',
alias: 'stretch'
},
viewModel: {
data: {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: '',
datastore1:[],
datastore2:[],
index: 0,
arr: [
{
value1: '11111111',
value2: '1111111111111',
value3: '111111111111',
value4: '111111111',
value5: '1111111',
value6: '1111111',
value7: '11111111111111',
datastore1:[
{
data1: '1',
data2: '1',
data3: '1',
data4: 3,
data5: '6000'
},
{
data1: '2',
data2: '1',
data3: '1',
data4: 10,
data5: '4000'
}
],
datastore2:[
{
data1: 2,
data2: 2,
data3: 2,
data4: 2,
data5: 2,
data6: 2,
data7: 2,
data8: 2,
data9: 2,
data10: 2,
data11: 2,
data12: 2,
data13: 2
}
]
},
{
value1: '2222222',
value2: '222222222222',
value3: '22222222',
value4: '2222222222222222222',
value5: '22222222',
value6: '2222222',
value7: '222',
datastore1:[
{
data1: '2',
data2: '2',
data3: '2',
data4: 3,
data5: '6000'
},
{
data1: '33',
data2: '2',
data3: '2',
data4: 10,
data5: '4000'
}
],
datastore2:[
{
data1: 3,
data2: 3,
data3: 32,
data4: 3,
data5: 3,
data6: 3,
data7: 3,
data8: 3,
data9: 3,
data10: 3,
data11: 3,
data12: 3,
data13: 3
}
]
},
{
value1: '33333333333',
value2: '333333333333',
value3: '333333333',
value4: '33333333333',
value5: '3333333333',
value6: '33333',
value7: '33333333',
datastore1:[
{
data1: '3',
data2: '4',
data3: '4',
data4: 3,
data5: '6000'
},
{
data1: '4',
data2: '4',
data3: '4',
data4: 10,
data5: '4000'
}
],
datastore2:[
{
data1: 4,
data2: 4,
data3: 4,
data4: 4,
data5: 4,
data6: 4,
data7: 4,
data8: 4,
data9: 4,
data10: 4,
data11: 4,
data12: 4,
data13: 4
}
]
}
]
},
stores: {
store1: Ext.create('Ext.data.Store', {
data: [

]
}),
store2: Ext.create('Ext.data.Store', {
data: [

]
})
}
},
items: [
{
region: 'north',
xtype: 'form',
split: true,
minHeight: 100,
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
tbar: [
{
xtype: 'label',
text: 'formOne',
cls:'tab-view-model-view-label'
},
'->',
{
xtype: 'form',
defaults: {
xtype: 'button'
},
items: [
{
text: '|<',
itemId: 'ltall',
handler: 'setViewModelIndex'
},
{
text: '<',
itemId: 'lt',
handler: 'setViewModelIndex'
},
{
bind: {
text: '{index}/{arr.length}'
}
},
{
text: '>',
itemId: 'gt',
handler: 'setViewModelIndex'
},
{
text: '>|',
itemId: 'gtall',
handler: 'setViewModelIndex'
}
]
}
],
defaults: {
viewModel: {
data: {
fieldLabel: '字段'
}
},
layout: {
type: 'fit',
align: 'stretch'
},
defaults: {
xtype: 'textfield',
fieldLabel: '字段',
labelWidth: 80,
labelAlign: 'right'
}
},
items: [
{
viewModel: {
data: {
fieldLabel: '字段1'
}
},
items: [
{
bind: {
fieldLabel: '{fieldLabel}',
value: '{value1}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段2'
}
},
width: 200,
items: [
{
xtype: 'displayfield',
bind: {
fieldLabel: '{fieldLabel}',
value: '{value2}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段3'
}
},
items: [
{
bind: {
fieldLabel: '{fieldLabel}',
value: '{value3}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段4'
}
},
width: 200,
items: [
{
xtype: 'displayfield',
bind: {
fieldLabel: '{fieldLabel}',
value: '{value4}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段5'
}
},
colspan: 2,
items: [
{
bind: {
fieldLabel: '{fieldLabel}',
value: '{value5}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段6'
}
},
colspan: 2,
items: [
{
bind: {
fieldLabel: '{fieldLabel}',
value: '{value6}'
}
}
]
},
{
viewModel: {
data: {
fieldLabel: '字段7'
}
},
colspan: 4,
items: [
{
xtype: 'displayfield',
bind: {
fieldLabel: '{fieldLabel}',
value: '{value7}'
}
}
]
}
]
},
{
region: 'center',
layout: {
type: 'vbox',
align: 'stretch'
},
tbar: [
{
xtype: 'label',
text: 'gridOne',
cls:'tab-view-model-view-label'
}
],
item
e5a2
s: [
{
xtype: 'textfield',
height: 30,
fieldLabel: '字段',
labelWidth: 80,
labelAlign: 'right'
},
{
minHeight: 100,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
width: 80,
xtype: 'panel',
padding: 0,
items: [
{
xtype: 'displayfield',
fieldLabel: 'gridChild',
labelAlign: 'right',
labelWidth: 80
}
]
},
{
flex: 1,
xtype: 'grid',
bind: {
store: '{store1}'
},
tbar: [
{
text: 'data4',
handler: function () {
this.up('grid').store.getSorters().removeAll(true)
this.up('grid').store.sort('data4', 'ASC')
}
},
{
text: 'data5',
handler: function () {
this.up('grid').store.getSorters().removeAll(true)
this.up('grid').store.sort('data5', 'ASC')
}
}
],
columns: {
items: [
{
text: 'data1',
dataIndex: 'data1',
renderer: function (v) {
return 'data1' + v
}
},
{
text: 'data2',
dataIndex: 'data2'
},
{
text: 'data3',
dataIndex: 'data3'
},
{
text: 'data4',
dataIndex: 'data4',
renderer: function (v) {
return v + '天'
}
},
{
text: 'data5',
dataIndex: 'data5',
renderer: function (v) {
return '￥' + v + '/吨'
}
}
]
}
}
]

}
]

},
{
region: 'south',
split: true,
minHeight: 100,
tbar: [
{
text: 'btn1'
},
{
text: 'btn2'
},
{
text: 'btn3'
},
{
text: 'btn4'
},
{
text: 'btn5'
}
],
layout: {
type: 'fit',
align: 'stretch'
},
items: [
{
xtype: 'grid',
tbar: [
{
xtype: 'label',
text: 'gridTwo',
cls:'tab-view-model-view-label'
}
],
bind: {
store: '{store2}'
},
columns: {
items: [
{
text: 'data1',
dataIndex: 'data1'
},
{
text: 'data2',
dataIndex: 'data2'
},
{
text: 'data3',
dataIndex: 'data3'
},
{
text: 'data4',
dataIndex: 'data4'
},
{
text: 'data5',
dataIndex: 'data5'
},
{
text: 'data6',
dataIndex: 'data6'
},
{
text: 'data7',
dataIndex: 'data7'
},
{
text: 'data8',
dataIndex: 'data8'
},
{
text: 'data9',
dataIndex: 'data9'
},
{
text: 'data10',
dataIndex: 'data10'
},
{
text: 'data11',
dataIndex: 'data11'
},
{
text: 'data12',
dataIndex: 'data12'
},
{
text: 'data13',
dataIndex: 'data13'
}
]
}
}
]
}
]
})

4，controller
/**
* Created by Sukla on 2017/12/25.
*/
Ext.define('app.view.common.tabViewModel.TabViewModelController',{
extend:'Ext.app.ViewController',
alias:'controller.tabViewModelController',

setViewModelIndex:function(btn){
var vm=this.getViewModel();
var arr=vm.get('arr');
var index=vm.get('index');
switch(btn.itemId){
case 'ltall':
vm.set('index',1);
this.setViewModelByIndex()
break;
case 'lt':
if(index>1){
vm.set('index',index-1);
this.setViewModelByIndex()
}
break;
case 'gt':
if(index<arr.length){
vm.set('index',index+1);
this.setViewModelByIndex()
}
break;
case 'gtall':
vm.set('index',arr.length);
this.setViewModelByIndex()
break;
default:vm.set('index',0);
}
},
setViewModelByIndex:function(){
var vm=this.getViewModel();
var arr=vm.get('arr');
var index=vm.get('index');
for(var key in arr[index-1]){
vm.set(key,arr[index-1][key])
}
vm.set('store1',Ext.create('Ext.data.Store',{
data:vm.get('datastore1')
}))
vm.set('store2',Ext.create('Ext.data.Store',{
data:vm.get('datastore2')
}))
}

})

5，用到的css
.tab-view-model-view .tab-view-model-view-label{
border-left:6px solid #22bd7a;
padding-left:5px;
font-weight: bold;
}