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'
                }
            ],
            items: [
                {
                    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;
}