PDA

View Full Version : LockingGridView with Drag and Drop



jbraband
28 Apr 2010, 1:26 PM
the example LockingGridView class works with the enableDragDrop option set to true on the grid. What is undesirable is that the drag zone is set the right pane of the grid (read: the unlocked columns). this prevents the user from clicking on a row in a locked column and executing a drag from there.

I have tracked the culprit and can change the functionality of this drag zone within the Ext.grid.GridDragZone class (src/widgets/grid/GridDD.js)

here is the constructor for Ext.grid.GridDragZone



Ext.grid.GridDragZone = function(grid, config){
this.view = grid.getView();
Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
this.scroll = false;
this.grid = grid;
this.ddel = document.createElement('div');
this.ddel.className = 'x-grid-dd-wrap';
};


the culprit is the call to superclass.constructor and passing this.view.mainBody.dom. In Ext.ux.grid.LockingGridView, this.mainBody is defined as the first child of the scroller (the right side unlocked columns)

changing this.view.mainBody.dom to this.view.el.dom in the above constructor gives me the behavior I am expecting (dragging out of both the left and right columns)

now, how do i go about extending Ext.grid.GridDragZone and override just the constructor? I have copied the whole GridDragZone class in to file, renamed it to Ext.ux.grid.LockingGridDragZone, changed it to this.view.el.dom and it works (after changing LockingGridView to user this new class, line 440 of the 3.2.1 source). but this is neither elegant or maintainable down the road.

so, how can i do this without having to maintain my own copy of Ext.grid.GridDragZone?

Thanks!

-j

rohitvats
10 May 2010, 8:01 AM
Thanks for finding out the solution.
Dropping the following in ext-overrides should save you from maintaining another class:


(function () {
var p = Ext.grid.GridDragZone.prototype;
Ext.grid.GridDragZone = function(grid, config) {
this.view = grid.getView();
Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.el.dom, config);
this.scroll = false;
this.grid = grid;
this.ddel = document.createElement('div');
this.ddel.className = 'x-grid-dd-wrap';
};
Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, p);
})();