CODEWITHSUNDEEP
extjs
Scott
Scott

Reputation: 2657

ExtJS - EditorGridPanel rows not draggable?

I had a working grid-to-grid drag and drop configuration, but once I changed one of the grids to an EditorGridPanel, I could no longer drag from it - only to it. Once I click on the row I want to drag I get the following error:

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

ext-all-debug.js (line 45439)

Is there any way to set it up so I can drag rows from an EditorGridPanel?

Upvotes: 2

Views: 2600

Answers (2)

FingolfinTEK
FingolfinTEK

Reputation: 11

You don't have to use RowSelectionModel, but you will have to write your own code for the drag and drop zones. Here's an example of how to use drag and drop with 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;
        }
    });
}

Upvotes: 1

Scott
Scott

Reputation: 2657

Found the answer to this inadvertently while looking at another example.

When creating a EditorGridPanel, be sure to include:

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

to get the drag and drop functionality to work.

Upvotes: 2

Related Questions