Autosize Columns

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.

Code:

---


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

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.

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).

Code:

---

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;
    }
});

---

Hi, qooleot

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

Code:

---

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

---

This doesn't work in Chrome.

Kind regards, extjser12

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.

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.

With which event do you call the "autoSizeColumns()" method?

Kind regards, extjser12

I actually have a button on my grid's toolbar that says "Autosize Columns". The click handler calls the function. Thats what the customer requested...