Dragging-and-dropping records between grids

1. Having included our basic Invoice Store and Model, our first step is to create our two
grids. The first, containing unpaid invoices, will be bound to our invoicesStore,
and the second bound to a new empty store:
var unpaidInvoicesGrid = Ext.create('Ext.grid.Panel', {
title: 'Unpaid Invoices',
height: 300,
width: 600,
store: invoiceStore,
columns: [{
header: 'Client',
dataIndex: 'Client'
}, {
header: 'Date',
dataIndex: 'Date'
}, {
header: 'Amount',
dataIndex: 'Amount'
}, {
header: 'Status',
dataIndex: 'Status'
}],
renderTo: Ext.getBody()
});

var paidInvoicesGrid = Ext.create('Ext.grid.Panel', {
title: 'Unpaid Invoices',
height: 300,
width: 600,
store: new Ext.data.Store({
model: 'Invoice'
}),
columns: [{
header: 'Client',
dataIndex: 'Client'
}, {
header: 'Date',
dataIndex: 'Date'
}, {
header: 'Amount',
dataIndex: 'Amount'
}, {
header: 'Status',
dataIndex: 'Status'
}],
renderTo: Ext.getBody()
});

2. Next, we configure the Ext.grid.plugin.DragDrop plugin as part of each
grid's view configuration. It takes two options, in addition to its ptype value,
namely dragGroup and dropGroup:
// Unpaid Invoices Grid
...
viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
dragGroup: 'unpaid-group',
dropGroup: 'paid-group'
}]
}
...
// Paid Invoices Grid
...
viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
dragGroup: 'paid-group',
dropGroup: 'unpaid-group'
}]
}
...

Updating a row's data after dropping

1. We start by adding a listener for the drop event to the viewConfig of the unpaid
invoices grid:
...
viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
dragGroup: 'unpaid-group',
dropGroup: 'paid-group'
}],
listeners: {
drop: function(node, data, overModel, dropPosition){
}
}
}

...

2. We can now access an array of the models that are being dragged from the data
parameter's records property. We will then iterate through this array and update
each model's Status field to Unpaid:
...
drop: function(node, data, overModel, dropPosition){
var records = data.records;
Ext.each(records, function(record){
record.set('Status', 'Unpaid');
});
}
...

3. We can add the same code to the paid invoices grid; but replacing the Unpaid string
with Paid:
...
drop: function(node, data, overModel, dropPosition){
var records = data.records;
Ext.each(records, function(record){
record.set('Status', 'Unpaid');
});
}
...

Allowing rows to be reordered with drag-and-drop

viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
dragGroup: 'unpaid-group',
dropGroup: 'paid-group',
}, {
ptype: 'gridviewdragdrop',
dragGroup: 'unpaid-group',
dropGroup: 'unpaid-group',
}],
listeners: {
drop: function(node, data, overModel, dropPosition){
var records = data.records;
Ext.each(records, function(record){
record.set('Status', 'Unpaid');
});
}
}
}