1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    59
    Vote Rating
    0
    extjser12 is on a distinguished road

      0  

    Default Autosize Columns

    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Raleigh, NC
    Posts
    145
    Vote Rating
    5
    qooleot is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    59
    Vote Rating
    0
    extjser12 is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  6. #6
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Raleigh, NC
    Posts
    145
    Vote Rating
    5
    qooleot is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    59
    Vote Rating
    0
    extjser12 is on a distinguished road

      0  

    Default


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

    Kind regards, extjser12

  8. #8
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Raleigh, NC
    Posts
    145
    Vote Rating
    5
    qooleot is on a distinguished road

      0  

    Default


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

Thread Participants: 2