How to resize columns using grid.columns[index].setWidth(width) in ExtJS 4 when flex is applied?

Question

emphasized textWhen columns' width in panel.Grid is set using the width property columns resize by grid.columns[index].setWidth(width) works as it should. But when columns' width is set by flex, this code doesn't work.

Just to make it clear: I'm trying to synchronize columns resize/move/hide/etc events on two grids.

So both grids have basically the same columns:

me.columns = {
        defaults: {
            renderer: tooltipRenderer
        },
        items: [
            {
                header: "product",
                dataIndex: 'product',
                groupable: false,
                flex: 1
            },                

            {
                header:'Value',
                dataIndex: 'vlue',
                align: 'right',
                renderer: Ext.util.Format.numberRenderer('0,000.00'),
                summaryType: 'remote',
                summaryRenderer: Ext.util.Format.numberRenderer('0,000.00'),
                groupable: false,
                flex: 1
            }
        ]
    };

Code from plugin to synchronize columns resize:

firstGrid.on('columnresize', function (ct, column, width) {
        console.log('fgrid: ' + width + ' column name: ' + column.dataIndex);
        secondGrid.columns[column.getIndex()].setWidth(width);
    }, firstGrid);

secondGrid.on('columnresize', function (ct, column, width) {
        console.log('sGrid: ' + width + ' column name: ' + column.dataIndex);
        firstGrid.columns[column.getIndex()].setWidth(width);
    }, secondGrid);

So, what I have now: when I resize columns with width set by flex in one grid corresponding column from the other doesn't change it's width, but if after resizing column in one grid I resize one from the other everything works just as it should. I hope this description wasn't too weird.

Answer 1

You're not supposed to set width on something where its width is being managed by a layout. If you delete the flex property for the column, then setWidth works https://fiddle.sencha.com/#fiddle/4b4

My example toggles the flex property so you can set width, try clicking on the page and you'll see the flexed column change width

// Assume you have a variable gridwhere the second column is flexed.
Ext.getBody().on('click', function() {
    var emailCol = grid.query('gridcolumn')[1];
    if (emailCol.flex) {
        delete emailCol.flex;
        emailCol.setWidth(100);
    } else {
        emailCol.flex = 1;
        grid.doLayout();
    }              
});