Ext JS Reordering a drag and drop list

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 开发者_JAVA技巧to be able to drag a item between two others or to the front then drop it there.

Any advice appreciated, thanks.

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

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(), { ....