[FIXED-745][2.x, 3.x] headersDisabled changes on column drag

[mjlecomte]

Mystix is completely to blame for me posting this.

• http://extjs.com/forum/showthread.ph...222#post298222
• http://extjs.com/forum/showthread.ph...408#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]

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]

Mystix is completely to blame for me posting this.

D'oh...

[mjlecomte]

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]

Corrected (that's what you get when you write code in the forum editor)

[mystix]

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]

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]

Fixed in rev 6319.