javascript - 应用 flex 时如何在 ExtJS 4 中使用 grid.columns[index].setWidth(width) 调整列的大小？

Question

强调文本当 panel.Grid 中的列宽度使用 width 属性设置时，列的大小由 grid.columns[ index].setWidth(width) 正常工作。但是当列的宽度由 flex 设置时，此代码不起作用。

只是说清楚:我正在尝试同步两个网格上的列调整大小/移动/隐藏/等事件。

因此两个网格具有基本相同的列:

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
            }
        ]
    };

来自插件的代码同步列大小调整:

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

所以，我现在拥有的是:当我在一个网格中调整宽度由 flex 设置的列时，与另一网格对应的列不会改变它的宽度，但是如果在一个网格中调整列的大小后我从另一个调整大小一切正常。 我希望这个描述不会太奇怪。

Answer 1

您不应该在其宽度由布局管理的对象上设置宽度。如果删除该列的 flex 属性，则 setWidth 有效 https://fiddle.sencha.com/#fiddle/4b4

我的例子切换了 flex 属性，所以你可以设置宽度，尝试点击页面，你会看到 flexed 列改变宽度

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