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(); },