ExtJS - EditorGridPanel 行不可拖动？答案

【问题标题】：ExtJS - EditorGridPanel rows not draggable?ExtJS - EditorGridPanel 行不可拖动？
【发布时间】：2011-03-28 13:05:48
【问题描述】：

我有一个有效的网格到网格拖放配置，但是一旦我将其中一个网格更改为 EditorGridPanel，我就不能再从它拖动 - 只能拖动到它。单击要拖动的行后，会出现以下错误：

sm.isSelected is not a function
if(!sm.isSelected(rowIndex) || e.hasModifier()){

ext-all-debug.js (line 45439)

有什么方法可以设置它，以便我可以从 EditorGridPanel 中拖动行？

【问题讨论】：

标签： extjs

【解决方案1】：

在查看另一个示例时无意中找到了答案。

在创建 EditorGridPanel 时，请务必包括：

selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),

让拖放功能正常工作。

【讨论】：

您可以发布指向您找到的示例的链接吗？
确保这在网格的 viewConfig 设置中，而不是直接在网格的配置设置中。

【解决方案2】：

您不必使用 RowSelectionModel，但您必须为拖放区域编写自己的代码。下面是一个如何使用 CellSelectionModel 拖放的示例：

grid1.on('render', function(grid) {grid1.initializeDragZone (grid1); }); grid2.on('render', function(grid) {grid2.initializeDropZone (grid2); });

initializeDragZone : function(grid) {
    grid.dragZone = new Ext.dd.DragZone(grid.getEl(), {
        getRepairXY: function() {
            return this.dragData.repairXY;
        },

        getDragData: function(e) {
            var cell = grid.getSelectionModel().getSelectedCell();
            var row = grid.getStore().getAt(cell[0]);
            var data = row.get('id');     //you can put custom data here
            var sourceEl = grid.getView().getRow(cell[0]);

            if (sourceEl) {
                var d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return grid.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    customData: data  //our custom data
                };
            }
        }
    });
}

initializeDropZone : function(grid) {
    grid.dropZone = new Ext.dd.DropZone(grid.getView().scroller, {
        getTargetFromEvent: function(e) { //supports multiple drop zone classes
            var target = e.getTarget('.some-class1');  
            target = target? target: e.getTarget('.some-class2');
            target = target? target: e.getTarget('.some-class3');
            target = target? target: e.getTarget('.some-class4');
            return target;
        },

        onNodeEnter : function(target, dd, e, data){ 
            Ext.fly(target).addClass('drop-zone-selected'); //test
        },

        onNodeOut : function(target, dd, e, data){ 
            Ext.fly(target).removeClass('drop-zone-selected');  //test
        },

        onNodeOver : function(target, dd, e, data){ 
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

        onNodeDrop : function(target, dd, e, data){
            var rowIndex = grid.getView().findRowIndex(target);
            var rowRecord = grid.getStore().getAt(rowIndex);
            var customData = data.customData;

            //use custom data

            return true;
        }
    });
}

【讨论】：