Extjs4 implements the data dragging function between two gridpanels

1. I have seen on winForm that some data will be placed in the to-be-selected box when selecting data, and you can put the data you want to select in the alternative box, so how to use Extjs to implement similar functions, we choose to use two gridpanels to simulate the alternative box and the waiting box. As shown in:

 

The definition code is as follows:

{
Xtype: 'gridpanel ',
MultiSelect: true,
Id: 'staff ',
X: 5,
Y: 0,
Height: 205,
Width: 260,
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 ';
}
} Www.2cto.com
},
Store: StaffData, // store for loading data
Columns: columns,
StripeRows: true,
Title: 'practitioners ',
Margins: '0 2 0 0'
},
{
Xtype: 'gridpanel ',
Id: 'admin ',
X: 280,
Y: 0,
Height: 205,
Width: 260,
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 ';
}
}
},
Store: AdminData,
Columns: columns,
StripeRows: true,
Title: 'postmaster ',
Margins: '0 0 0 3'
}

In this way, you can store the data in the corresponding store during drag and drop operations, and retrieve the data from the store as needed.