extjs - Ext JS重新排序拖放列表

Question

我已经在http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1上关注了本教程

太好了，但是现在我需要有关如何在功能上添加才能重新排列单个列表的指针。当我将一个项目放到列表中时，它会附加在末尾。但是，我希望能够将一个项目拖到其他两个项目之间或拖到前面，然后将其放到那里。

任何建议表示赞赏，谢谢。

Answer 1

我在博客http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html中发现了通过拖放工作示例对Ext.GridPanel行进行排序
对我来说很好。这是我的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();
                   }
               }
    }
});