Question

98

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

rated 0 times [ 102] [ 4] / answers: 1 / hits: 6608 / 10 Years ago, tue, march 18, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jack

Add To Favorites

Follow

Total Points: 557

Total Questions: 96

Total Answers: 80

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 10 Years ago juancarlos · Accepted Answer

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

    }              

});