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

如果通過側

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

然後用3電網側有橫向盒佈局必須JUSE電網厄爾尼諾，而不是容器

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