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

Answer 2

如果您的hbox布局与3 Grid并排

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

然后你必须juse grid El而不是容器

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

Ext JS重新排序拖放列表

2 个答案: