PDA

View Full Version : [FIXED-745][2.x, 3.x] headersDisabled changes on column drag



mjlecomte
5 Mar 2009, 6:16 AM
Mystix is completely to blame for me posting this. :)


http://extjs.com/forum/showthread.php?p=298222#post298222
http://extjs.com/forum/showthread.php?p=221408#post221408


If you drop this into the array-grid demo:


// create the Grid
var grid = new Ext.grid.GridPanel({
viewConfig: {
headersDisabled: true // disable grid headers
},
store: store,

When you mouse over and click on the headers they don't change in appearance, nor do they sort, or show the trigger. Fair enough, that's what I expected it should do. But now, drag the columns to reorder them. Low and behold, headersDisabled == false now, all features of headers appear to be restored.

It's almost as if there's a nifty config for:

enableHeadersOnDrag: true

Condor
5 Mar 2009, 6:48 AM
SplitDragZone uses headersDisabled, so it's not a property you can use in the GridView config.

Or you would have to backup the original value, e.g.

Ext.override(Ext.grid.GridView.SplitDragZone, {
b4StartDrag : function(x, y){
this.oldHeadersDisabled = this.view.headersDisabled;
this.view.headersDisabled = true;
var h = this.view.mainWrap.getHeight();
this.marker.setHeight(h);
this.marker.show();
this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]);
this.proxy.setHeight(h);
var w = this.cm.getColumnWidth(this.cellIndex);
var minw = Math.max(w-this.grid.minColumnWidth, 0);
this.resetConstraints();
this.setXConstraint(minw, 1000);
this.setYConstraint(0, 0);
this.minX = x - minw;
this.maxX = x + 1000;
this.startPos = x;
Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
},
endDrag : function(e){
this.marker.hide();
var endX = Math.max(this.minX, e.getPageX());
var diff = endX - this.startPos;
this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
},
onMouseUp : function(e){
var v = this.view, d = this.oldHeadersDisabled;
setTimeout(function(){
v.headersDisabled = d;
}, 50);
}
});

mystix
5 Mar 2009, 7:01 AM
Mystix is completely to blame for me posting this. :)

http://img12.imageshack.us/img12/5403/orangutan1.jpg

D'oh...

mjlecomte
5 Mar 2009, 7:17 AM
SplitDragZone uses headersDisabled, so it's not a property you can use in the GridView config.

Do you need to specify the view?


Ext.override(Ext.grid.GridView.SplitDragZone, {
b4StartDrag : function(x, y){
this.oldHeadersDisabled = this.view.headersDisabled;
this.view.headersDisabled = true;
var h = this.view.mainWrap.getHeight();
this.marker.setHeight(h);
this.marker.show();
this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]);
this.proxy.setHeight(h);
var w = this.cm.getColumnWidth(this.cellIndex);
var minw = Math.max(w-this.grid.minColumnWidth, 0);
this.resetConstraints();
this.setXConstraint(minw, 1000);
this.setYConstraint(0, 0);
this.minX = x - minw;
this.maxX = x + 1000;
this.startPos = x;
Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
},
endDrag : function(e){
this.marker.hide();
var v = this.view;
var endX = Math.max(this.minX, e.getPageX());
var diff = endX - this.startPos;
v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
},
onMouseUp : function(e){
var oldHeadersDisabled = this.oldHeadersDisabled;

var v = this.view;

setTimeout(function(){
v.headersDisabled = oldHeadersDisabled;
}, 50);
}
});

Condor
5 Mar 2009, 7:30 AM
Corrected (that's what you get when you write code in the forum editor)

mystix
5 Mar 2009, 7:37 AM
Corrected (that's what you get when you write code in the forum editor)

off-topic: one day, all forum editors will be like this:
https://bespin.mozilla.com/

Wedgie
15 Mar 2010, 4:54 PM
Hi guys,
This one caught me out badly. Luckily I found this thread before spending too many hours on it. Also, the problem is not obvious - I was just lucky to pick it up in testing.

The GridView headersDisabled config is still documented in 3.1.1, but it's also still broken by column dragging or resizing. So it looks like either it needs to come out of the docs or get fixed per the suggestion. I can confirm the bug in 3.0.3 by testing, and code inspection of GridView.js in 3.1.1 indicates it's still there.

Personally my preference is for it to be fixed in the code since you need to be able to disable sorting without also disabling column resizing, and there will be lots of deployed systems out there that have relied on it - probably not knowing that it will break if the user clicks the wrong spot in the headers.

Cheers

evant
18 Mar 2010, 2:48 AM
Fixed in rev 6319.