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

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

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

secondGrid.on('columnresize', function (ct, column, width) {
        console.log('sGrid: ' + width + ' column name: ' + column.dataIndex);
    }, 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.



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

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;
    } else {
        emailCol.flex = 1;


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.