Extjs4.0 -- grid to grid dragging example

Figure:

 

Js:

<Script type = "text/javascript"> Ext. require (['ext. grid. * ', 'ext. data. * ', 'ext. dd. * ']); Ext. define ('dataobject', {extend: 'ext. data. model ', fields: ['name', 'column1', 'column2 ']}); Ext. onReady (function () {var myData = [{name: "Nana", column1: "25", column2: "3" },{ name: "captain", column1: "24", column2: "2" },{ name: "silly girl", column1: "23", column2: "3" },{ name: "Stay", column1: "25", column2: "3" },{ name: "cat", column1: "24", column2: "3"}]; // create the data store var firstGridStore = Ext. create ('ext. data. store', {model: 'dataobject', data: myData}); // Column Model shortcut array var columns = [{text: "name", flex: 1, sortable: true, dataIndex: 'name'}, {text: "Age", width: 70, sortable: true, dataIndex: 'column1 '}, {text: "Water age ", width: 70, sortable: true, dataIndex: 'colum N2 '}]; // declare the source Grid var firstGrid = Ext. create ('ext. grid. panel ', {multiSelect: true, viewConfig: {plugins: {ptype: 'gridviewdragdrop', dragGroup: 'firstgridddgroup', dropGroup: 'secondgridddgroup'}, listeners: {drop: function (node, data, dropRec, dropPosition) {var dropOn = dropRec? ''+ DropPosition +'' + dropRec. get ('name'): 'On empty view'; // Ext. example. msg ("Drag from right to left", 'dropped' + data. records [0]. get ('name') + dropOn) ;}}, store: firstGridStore, columns: columns, stripeRows: true, title: 'select', margins: '0 2 0 0'}); var secondGridStore = Ext. create ('ext. data. store', {model: 'dataobject'}); // create the destination Grid var secondGrid = Ext. Create ('ext. grid. panel ', {viewConfig: {plugins: {ptype: 'gridviewdragdrop', dragGroup: 'secondgridddgroup', dropGroup: 'firstgridddgroup'}, listeners: {drop: function (node, data, dropRec, dropPosition) {var dropOn = dropRec? ''+ DropPosition +'' + dropRec. get ('name'): 'On empty view'; // Ext. example. msg ("Drag from left to right", 'dropped' + data. records [0]. get ('name') + dropOn) ;}}, store: secondGridStore, columns: columns, stripeRows: true, title: 'selected', margins: '0 0 0 3'}); // Simple 'border layout 'panel to house both grids var displayPanel = Ext. create ('ext. panel ', {width: 650, height: 300, layout: {type: 'hbox', align: 'Stretch', padding: 5}, renderTo: Ext. getBody (), defaults: {flex: 1}, // auto stretch items: [firstGrid, secondGrid], dockedItems: {xtype: 'toolbar', dock: 'bottom ', items: ['->', // Fill {text: 'select', handler: function () {firstGridStore. removeAll (); secondGridStore. loadData (myData) ;},{ text: 'cancel', handler: function () {firstGridStore. loadData (myData); secondGridStore. removeAll () ;}}] }}) ;}); </script>