auto resize columns in ext 4.0.0

[sraghura201]

I have a column that uses a custom image renderer. I need the column to expand to fit the size of the image. Since

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

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()?

[sraghura201]

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

[janwijffels]

Hi,

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

[newbie.scott]

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

Cheers
N

ewbieScott

[sraghura201]

I switched to using extjs-3.2 where the code works

[skirtle]

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

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.

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

[perl.dev]

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

[skirtle]

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.

[perl.dev]

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

[eeshuz]

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.