1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    1
    sraghura201 is on a distinguished road

      0  

    Default Unanswered: auto resize columns in ext 4.0.0

    Unanswered: auto resize columns in ext 4.0.0


    I have a column that uses a custom image renderer. I need the column to expand to fit the size of the image. Since
    Code:
    meta.style="width:auto !important;"
    and using a tdCls which specifies width:auto don't work, I need to resize them manually.


    I went by the discussion in this thread and used the code posted by animal
    http://www.sencha.com/forum/showthre...utoSizeColumns
    Code:
    Ext.override(Ext.CompositeElement, {
        getTextWidth: function() {
            var i, e, els = this.elements, result = 0;
            for(i = 0; e = Ext.get(els[i]); i++) {
                result = Math.max(result, e.getTextWidth.apply(e, arguments));
            }
            return result;
        }
    });
    
    Ext.override(Ext.grid.GridPanel, {
        autoSizeColumns: function() {
            this.colModel.suspendEvents();
            for (var i = 0; i < this.colModel.getColumnCount(); i++) {
                this.autoSizeColumn(i);
            }
            this.colModel.resumeEvents();
            this.view.refresh(true);
        },
    
        autoSizeColumn: function(c) {
            var col = this.view.el.select("td.x-grid3-td-" + this.colModel.getColumnId(c) + " div:first-child");
            if (col) {
                var w = col.getTextWidth() + Ext.get(col.elements[0]).getFrameWidth('lr') + 2;
                this.colModel.setColumnWidth(c, w);
                return w;
            }
        }
    })
    The catch is that Ext.CompositeElementLite is not overrideable and overriding Ext.ComponentElement gets the same "col.getTextWidth is not a function" error mentioned in that thread. So does anybody have a pointer about what exactly should be overridden to contain getTextWidth()?

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    1
    sraghura201 is on a distinguished road

      0  

    Default No inputs?

    No inputs?


    I think this should be a simple case of overriding some other class. Any help appreciated.

    Alternatively is there some other renderer - related way to autosize the width of a column

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    1
    Vote Rating
    0
    janwijffels is on a distinguished road

      0  

    Default


    Hi,

    I'm having the same problem when setting up ext.grid.panel.
    Have you already encountered a solution?

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Vote Rating
    0
    newbie.scott is on a distinguished road

      0  

    Default


    Any solution to this problem please? I am struck as well..

    Cheers
    N
    ewbieScott

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    1
    sraghura201 is on a distinguished road

      0  

    Default


    I switched to using extjs-3.2 where the code works

  6. #6
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    I've had a go at writing a plugin to solve this in ExtJS 4. Example usage:

    Code:
    Ext.create('Ext.grid.Panel', {
        height: 300,
        plugins: Ext.create('Ext.ux.grid.AutoWidthColumnsPlugin'),
        renderTo: Ext.getBody(),
        store: store,
        width: 300,
        columns: [
            {dataIndex: 'name', header: 'Name', autoWidth: true},
            {dataIndex: 'type', header: 'Type', autoWidth: 'single'},
            {dataIndex: 'age', header: 'Age', flex: 1}
        ]
    });
    I wrote it for 4.0.6. Testing against 4.0.2 and 4.0.5 gave slightly different behaviour in that it couldn't shrink a column below its initial width. To get behaviour comparable to 4.0.6 just set the initial column width to something small.

    In a vanilla grid it works fine but if you're using other plugins or features it may not work. However, I've tried to make it easy to extend and with any luck you'd just need to tweak the CSS selector.

    Other than the standard plugin methods there are 2 methods you might want to call manually: refresh() and autoWidthColumn(column). Under normal circumstances this won't be necessary as they are called automatically but you can get finer-grained control over when resizing occurs by calling them yourself.

    Code:
    Ext.define('Ext.ux.grid.AutoWidthColumnsPlugin', {
        extend: 'Ext.AbstractPlugin',
    
        init: function(grid) {
            this.bindGrid(grid);
        },
    
        bindGrid: function(grid) {
            this.disable();
            this.grid = grid;
            this.enable();
        },
    
        refresh: function() {
            var columns = this.grid.columns,
                index = 0,
                len = columns.length;
    
            for ( ; index < len ; ++index) {
                var column = columns[index];
    
                if (column.autoWidth) {
                    if (this.autoWidthColumn(column) && column.autoWidth === 'single') {
                        column.autoWidth = false;
                    }
                }
            }
        },
    
        autoWidthColumn: function(column) {
            var me = this,
                grid = me.grid,
                selector = me.columnCellsSelector(Ext.isNumber(column) ? grid.columns[column] : column),
                el = grid.getEl(),
                cells = el ? el.query(selector) : [],
                index = 0,
                len = cells.length,
                newWidth = 1;
    
            if (!len) {
                return false;
            }
    
            for ( ; index < len ; ++index) {
                newWidth = Math.max(newWidth, me.calculateWidth(cells[index]));
            }
    
            column.setWidth(newWidth);
    
            return newWidth;
        },
    
        columnCellsSelector: function(column) {
            return '.x-grid-cell-' + column.id + ' .x-grid-cell-inner';
        },
    
        calculateWidth: function(cell) {
            var el = Ext.fly(cell);
    
            return el.getTextWidth() + el.getFrameWidth('lr');
        },
    
        destroy: function() {
            this.bindGrid(null);
        },
    
        enable: function() {
            var me = this;
    
            if (me.disabled && me.grid) {
                me.grid.getView().on('refresh', me.refresh, me);
            }
    
            me.callParent();
        },
    
        disable: function() {
            var me = this;
    
            if (me.grid) {
                me.grid.getView().un('refresh', me.refresh, me);
            }
    
            me.callParent();
        }
    });

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    perl.dev is on a distinguished road

      0  

    Default Autosizing of columns - Did it work?

    Autosizing of columns - Did it work?


    Hello. I was curious to know if anyone has had success with this plugin? It looks promising.

    Also, does anyone know if Sencha plans to add an 'autoWidth' property in the future?

    Thanks,

    Scott

  8. #8
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    I've got a much improved version of that plugin now. I'll send you a copy over PM. Once 4.1 goes GA I'll publish it properly.

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    perl.dev is on a distinguished road

      0  

    Default


    I got it. We will implement and I'll give some feedback. Thanks again!

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

      0  

    Default


    Great implementation, thank you. However, I don't think it accommodates for when the length of the header is more than the length of the longest value of the column, thus the header is hidden in this scenario. Maybe it should check to see if the longest value is less than the header, and if so, make the width the header (plus however many pixels it is for the menu drop-down arrow). I would do this but I am so clueless about ExtJS and javascript it's not even funny - just following tutorials and reading to make things work. Thanks again.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar