Ext JS Reordering a drag and drop list - extjs

Question

I have followed the tutorial over at http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
It is great, however now I need pointers on how to add functionally of being to be able reorder a single list. At the moment when I drop a item on the list it is appended at the end. However I wish to be able to drag a item between two others or to the front then drop it there.
Any advice appreciated, thanks.

Answer 1

I found Ext.GridPanel row sorting by drag and drop working example in blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html
It worked fine for me. Here my js code:
app.grid = new Ext.grid.GridPanel({
store: app.store,
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
cm: new Ext.grid.ColumnModel({
columns: app.colmodel
}),
ddGroup: 'dd',
enableDragDrop: true,
listeners: {
"render": {
scope: this,
fn: function(grid) {
// Enable sorting Rows via Drag & Drop
// this drop target listens for a row drop
// and handles rearranging the rows
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'dd',
copy:false,
notifyDrop : function(dd, e, data){
var ds = grid.store;
// NOTE:
// you may need to make an ajax call
// here
// to send the new order
// and then reload the store
// alternatively, you can handle the
// changes
// in the order of the row as
// demonstrated below
// ***************************************
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}
// ************************************
}
})
// load the grid store
// after the grid has been rendered
this.store.load();
}
}
}
});

Answer 2

If you had hbox layout with 3 Grid side by side
new Ext.Panel(
{
layout: "hbox",
anchor: '100% 100%',
layoutConfig:
{
align: 'stretch',
pack: 'start'
},
items: [GridPanel1, GridPanel2, GridPanel3
})
then you must juse grid El instead of container
var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....