ExtJS - EditorGridPanel行不可拖动?

时间:2010-08-11 18:01:14

标签: extjs

我有一个工作的网格到网格拖放配置,但是一旦我将其中一个网格更改为EditorGridPanel,我就再也无法拖动它了 - 只有它。一旦我点击要拖动的行,我就会收到以下错误:

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

ext-all-debug.js (line 45439)

有没有办法设置它以便我可以从EditorGridPanel拖动行?

2 个答案:

答案 0 :(得分:2)

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

创建EditorGridPanel时,请务必包括:

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

让拖放功能正常工作。

答案 1 :(得分:1)

您不必使用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;
        }
    });
}