Autosize Columns

[extjser12]

Hello together

Can somebody help me to make the following code working in Ext JS 4.1 RC2? I copied the code from here http://www.sencha.com/forum/showthre...panel&p=269519.

var grid = new Ext.grid.GridPanel({
	store: new Ext.data.SimpleStore({
		fields: ['a', 'b', 'c'],
		data: [
			[1, 2, 3],
			[2, 3, 4],
			[3, 4, 5]
		]
	}),
	columns: [
		{header: 'A', dataIndex: 'a', width: 1},
		{header: 'B', dataIndex: 'b', width: 1},
		{header: 'C', dataIndex: 'c', width: 1}
	],
	cellPadding: 8,
	autoSizeColumn: function(colIndex) {
		var w = this.view.getHeaderCell(colIndex).firstChild.scrollWidth;
		for (var r = 0, len = this.store.getCount(); r < len; r++) {
			w = Math.max(w, this.view.getCell(r, colIndex).firstChild.scrollWidth);
		}
		w += this.cellPadding;
		this.colModel.setColumnWidth(colIndex, w);
		return w;
	},
	viewConfig: {
		afterRender: function(){
			this.constructor.prototype.afterRender.apply(this, arguments);
			this.grid.autoSizeColumn(0);
			this.grid.autoSizeColumn(1);
			this.grid.autoSizeColumn(2);
		}
	}
});
new Ext.Viewport({
	layout: 'fit',
	items: grid
});

Thanks for your support!

Kind regards
extjser12

[scottmartin]

Have a look at the following thread that talks about working around the depreciated function:

http://www.sencha.com/forum/archive/...p/t-20536.html

Regards,
Scott.

[qooleot]

Here is a quick stab at this - I'm on 4.1 rc3 as per thread title and haven't tested other versions or browsers outside of chrome. Also, I did test on grouped headers (like /example/grid/group-header-grid.html).

Ext.override(Ext.grid.GridPanel, {
    autoSizeColumns: function() {
        this.suspendEvents();
        // i counts outer columns - not nested headers
        var columnCnt = 0;
        for (var i = 0; i < this.columns.length; i++) {
          if (this.columns[i].items.length) {
            for (var j = 0; j < this.columns[i].items.length; j++) {
              this.autoSizeColumn(columnCnt);
              columnCnt++;
            }
          } else {
            this.autoSizeColumn(columnCnt);
            columnCnt++;
          }
        }
        this.resumeEvents();
        this.getView().refresh(true);
    },


    autoSizeColumn: function(c) {
        //Get the size of the header
        var col = this.getView().getHeaderAtIndex(c);
        var old_w = col.width;
        var w = Math.max(col.titleEl.dom.scrollWidth, col.titleEl.dom.firstChild.scrollWidth);
        for (var i = 0, l = this.store.getCount(); i < l; i++) {
            var cDOM = this.getView().getCell(this.store.getAt(i), col).dom.firstChild;
            var cEl = Ext.get(cDOM);
            //Avoid resizing checbox columns
            if(!cEl.hasCls('x-grid-col-checker')) {
                w = Math.max(w,  cDOM.scrollWidth + cEl.getBorderWidth('lr') + cEl.getPadding('lr'), cDOM.scrollWidth);
            }
        }


        // add 5 px for space if resizing
        if (w != old_w + 6) {
          w = w + 5;
        } else {
          w = w - 6;
        }


        this.getView().getHeaderAtIndex(c).setWidth(w);
        return w;
    }
});

[extjser12]

Hi, qooleot

Thanks for your help. How do I have to call your method?

listeners: {
    afterrender: function() {
        this.autoSizeColumn(0);
        this.autoSizeColumn(1);
    }
}

This doesn't work in Chrome.

Kind regards, extjser12

[scottmartin]

To use an override, simple place the block of code ( override ) and the top of your code. It will automatically override the defaults without make any manual calls.

Regards,
Scott.

[qooleot]

I'm not sure if maybe the 'afterrender' event is too early in the order of events to call it, but I tried this:

myGrid.autoSizeColumns();

from the chrome console after everything was finished and that worked for me.