Ext中数据在grid之间移动换行

1，要实现选中行在grid之间移动换行；

2，我的思路是把里面的数据拿出来之后，调整到位置，然后在显示出来；

3，效果如图；

4，代码如下

dataButtonWin:function(){
    var leftgriddata=[];
    leftgriddata=[
        {name: 'Rec 0', column1: '0', column2: '0'},
        {name: 'Rec 1', column1: '1', column2: '1'},
        {name: 'Rec 2', column1: '2', column2: '2'},
        {name: 'Rec 3', column1: '3', column2: '3'},
        {name: 'Rec 4', column1: '4', column2: '4'},
        {name: 'Rec 5', column1: '5', column2: '5'},
        {name: 'Rec 6', column1: '6', column2: '6'},
        {name: 'Rec 7', column1: '7', column2: '7'},
        {name: 'Rec 8', column1: '8', column2: '8'},
        {name: 'Rec 9', column1: '9', column2: '9'}
    ];
    Ext.create('Ext.window.Window',{
        width:800,
        height:600,
        viewModel: {
            data: {
                str: ''
            }
        },
        layout: {
            type: 'hbox',
            align: 'stretch'
        },

        items: [
            Ext.create('Ext.grid.Panel',{
                xtype: 'grid',
                title: 'First Grid',
                //reference: 'grid1',

                flex: 1,

                multiSelect: true,
                margin: '0 5 0 0',

                tools: [{
                    type: 'refresh',
                    tooltip: 'Reset both grids',
                    handler: 'onResetClick'
                }],
                viewConfig: {


                    listeners: {
                        selectionchange: function(record){

                            //var sels=this.getSelectionModel().getSelection()[0];
                            //var obj;
                            //var data=(this.myData=[]);
                            //data.push(obj = Ext.apply({}, sels.data));
                            //delete obj.id;
                            //this.ownerCt.ownerCt.items.items[2].getStore().loadData(this.myData);



                        }
                    }
                },

                store: {
                    data: leftgriddata
                },

                columns: [{
                    text: 'Record Name',
                    dataIndex: 'name',

                    flex: 1,
                    sortable: true
                }, {
                    text: 'column1',
                    dataIndex: 'column1',

                    width: 80,
                    sortable: true
                }, {
                    text: 'column2',
                    dataIndex: 'column2',

                    width: 80,
                    sortable: true
                }]
            }),
            {
                xtype:'container',
                layout:{
                    type:'table',
                    columns:3
                },
                defaults:{
                    xtype:'container',
                    width:50,
                    height:50
                },
                items:[
                    {
                        colspan:3,
                        height:100
                    },
                    {

                    },
                    {

                        xtype:'button',
                        iconCls:'x-fa  fa-arrow-circle-o-up',
                        handler:function(record){
                            var leftgrid=record.ownerCt.previousSibling();
                            var rightgrid=record.ownerCt.nextSibling();
                            var rightarr=[];
                            rightarr=rightgrid.getStore().data.items;
                            var rightarrdata=[];
                            for(var i=0;i<rightarr.length;i++){
                                rightarrdata.push(rightarr[i].data)
                            }
                            var sels=rightgrid.getSelectionModel().getSelection()[0];
                            var changerowarr=[];
                            for(var k=1;k<rightarrdata.length;k++){
                                if(rightarrdata[k].column1==sels.data.column1){
                                    changerowarr=rightarrdata[k];
                                    rightarrdata[k]=rightarrdata[k-1];
                                    rightarrdata[k-1]=changerowarr;
                                    break;
                                }
                            }


                           //var data=[
                           //     {name: 'Rec 0', column1: '0', column2: '0'},
                           //     {name: 'Rec 1', column1: '1', column2: '1'},
                           //     {name: 'Rec 2', column1: '2', column2: '2'},
                           //     {name: 'Rec 3', column1: '3', column2: '3'},
                           //     {name: 'Rec 5', column1: '5', column2: '5'},
                           //     {name: 'Rec 4', column1: '4', column2: '4'},
                           //     {name: 'Rec 6', column1: '6', column2: '6'},
                           //     {name: 'Rec 7', column1: '7', column2: '7'},
                           //     {name: 'Rec 8', column1: '8', column2: '8'},
                           //     {name: 'Rec 9', column1: '9', column2: '9'}
                           // ];
                            //var obj;
                            //var data=(this.ownerCt.myData=[]);
                            //data.push(obj = Ext.apply({}, sels.data));
                            //delete obj.id;
                            rightgrid.getStore().loadData(rightarrdata);
                            //rightgrid.getStore().remove(sels);
                            //leftgrid.getStore().insert(0, data);


                        }
                    },
                    {},
                    {

                        xtype:'button',
                        iconCls:'x-fa  fa-arrow-circle-left',
                        handler:function(record){
                            var leftgrid=record.ownerCt.previousSibling();
                            var rightgrid=record.ownerCt.nextSibling();

                            var sels=rightgrid.getSelectionModel().getSelection()[0];
                            var obj;
                            var data=(this.ownerCt.myData=[]);
                            data.push(obj = Ext.apply({}, sels.data));
                            delete obj.id;
                            //rightgrid.getStore().loadData(data);
                            rightgrid.getStore().remove(sels);
                            leftgrid.getStore().insert(0, data);


                        }
                    },
                    {},

                    {

                        xtype:'button',
                        iconCls:'x-fa  fa-arrow-circle-right',
                        handler:function(record){
                            var leftgrid=record.ownerCt.previousSibling();
                            var rightgrid=record.ownerCt.nextSibling();
                            var sels=leftgrid.getSelectionModel().getSelection()[0];
                            var obj;
                            var data=(this.ownerCt.myData=[]);
                            data.push(obj = Ext.apply({}, sels.data));
                            delete obj.id;
                            leftgrid.getStore().remove(sels);
                            //rightgrid.getStore().loadData(data);
                            rightgrid.getStore().insert(0, data);


                        }
                    },
                    {},
                    {

                        xtype:'button',
                        iconCls:'x-fa  fa-arrow-circle-o-down',
                        handler:function(record){
                            var leftgrid=record.ownerCt.previousSibling();
                            var rightgrid=record.ownerCt.nextSibling();
                            var rightarr=[];
                            rightarr=rightgrid.getStore().data.items;
                            var rightarrdata=[];
                            for(var i=0;i<rightarr.length;i++){
                                rightarrdata.push(rightarr[i].data)
                            }
                            var sels=rightgrid.getSelectionModel().getSelection()[0];
                            var changerowarr=[];
                            for(var k=0;k<rightarrdata.length-1;k++){
                                if(rightarrdata[k].column1==sels.data.column1){
                                    console.log(k);
                                    changerowarr=rightarrdata[k];
                                    rightarrdata[k]=rightarrdata[k+1];
                                    rightarrdata[k+1]=changerowarr;
                                    break;
                                }

                            }


                            //var data=[
                            //     {name: 'Rec 0', column1: '0', column2: '0'},
                            //     {name: 'Rec 1', column1: '1', column2: '1'},
                            //     {name: 'Rec 2', column1: '2', column2: '2'},
                            //     {name: 'Rec 3', column1: '3', column2: '3'},
                            //     {name: 'Rec 5', column1: '5', column2: '5'},
                            //     {name: 'Rec 4', column1: '4', column2: '4'},
                            //     {name: 'Rec 6', column1: '6', column2: '6'},
                            //     {name: 'Rec 7', column1: '7', column2: '7'},
                            //     {name: 'Rec 8', column1: '8', column2: '8'},
                            //     {name: 'Rec 9', column1: '9', column2: '9'}
                            // ];
                            //var obj;
                            //var data=(this.ownerCt.myData=[]);
                            //data.push(obj = Ext.apply({}, sels.data));
                            //delete obj.id;
                            rightgrid.getStore().loadData(rightarrdata);
                            //rightgrid.getStore().remove(sels);
                            //leftgrid.getStore().insert(0, data);


                        }
                    },
                    {}
                ]
            },
            {
                xtype: 'grid',
                title: 'Second Grid',
                reference: 'grid2',

                flex: 1,
                stripeRows: true,

                store: {

                },



                columns: [{
                    text: 'Record Name',
                    dataIndex: 'name',

                    flex: 1,
                    sortable: true
                }, {
                    text: 'column1',
                    dataIndex: 'column1',

                    width: 80,
                    sortable: true
                }, {
                    text: 'column2',
                    dataIndex: 'column2',

                    width: 80,
                    sortable: true
                }]
            }]

    }).show();
},