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
    8,927
    Vote Rating
    443
    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
    8,927
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi