Ext JS Reorder Drag and Drop List

Question

I followed the guide on http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1

This is great, but now I need pointers on how to add functionally in order to be able to reorder a single list. The moment I drop the item into the list, it is added at the end. However, I want to be able to drag an element between two others or to the foreground, and then drop it.

Any advice is appreciated, thanks.

Answer 1

I found sorting Ext.GridPanel rows by dragging and dropping a working example on the blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html This worked for me. Here is 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 have a hbox layout with 3 grids side by side

new Ext.Panel(
{
    layout: "hbox",
    anchor: '100% 100%',
    layoutConfig: 
    {
        align: 'stretch',
        pack: 'start'
    },
    items: [GridPanel1, GridPanel2, GridPanel3
})

then you should use El mesh instead of container

var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....