Ext JS Изменение порядка перетаскивания списка

Question

Я следовал за учебником в http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1

Это замечательно, однако теперь мне нужны указатели о том, как функционально добавить возможность переупорядочивать один список. В тот момент, когда я добавляю элемент в список, он добавляется в конце. Однако я хочу иметь возможность перетаскивать предмет между двумя другими или вперед, а затем бросать его туда.

Любой совет приветствуется, спасибо.

Answer 1

Я нашел сортировку строк Ext.GridPanel по рабочему примеру перетаскивания в блоге http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html Это работало нормально для меня. Вот мой код JS:

    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

Если у вас была компоновка hbox с 3 Grid рядом

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

, тогда вы должны использовать сетку El вместо контейнера

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