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.

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.

• javascript
• extjs
• extjs4
• extjs4.2
• extjs-mvc

Share Improve this question Follow edited Dec 21, 2015 at 14:29 edthehead asked Mar 18, 2014 at 15:42 edtheheadedthehead 14522 silver badges99 bronze badges 2

• Have some code that we can play with? I can tell what you're asking, and have a few thoughts, but can't take the time if I have to write the start up (broken) code myself. – Ruan Mendes Commented Mar 18, 2014 at 15:45
• Sure. I'll post it in five minutes. – edthehead Commented Mar 18, 2014 at 15:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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