在 ExtJs 6.2 中，包含项目的列不考虑其 flex 属性，是否有解决方法？

Question

在 ExtJs 6.2 中，有一个 bug described here in the Sencha Forum。

Since 6.2+ Ext.grid.Panel ignores flex when using column items.

Steps to reproduce the problem: Create a grid in fiddle with 6.2+ Add columns without items and flex:1 klick run in fiddle and it looks just fine Add a item to the column with flex:1 klick again run in fiddle an flex wil get ignored!

The result that was expected: I would expect the column to flex.

The result that occurs instead: The column will render in the minimum size.

帖子说这会在夜间构建中得到纠正，但 ExtJs 6.2.1 在 GPL 版本中尚不可用。这个问题有解决方法吗？

或者 id 是否可以让某人发布带有错误修复的覆盖？

编辑：补充见解

查看绑定到列和网格的事件，我可以断言错误发生在 afterrender 事件 (column.flex = 1) 和 afterlayout 事件 (column.flex = null).我不太了解 ExtJs 的布局运行细节，因此我对如何进一步缩小可能存在违规代码的位置缺乏想法。如果有人能在这方面给出提示而不是完整的答案，也欢迎他们。

Answer 1

我发现一种解决方法是在网格布局后调整列的大小。这可以正常工作。

唯一的缺点是它对列进行了两次布局。

Ext.define('App.override.grid.Panel', {
    override: 'Ext.grid.Panel',
    initComponent: function() {
        this.callParent(arguments);
        this.on('afterlayout', this.resizeColumns);
    },
    resizeColumns: function () {
        var me = this,
            width = this.getWidth(),
            flex = 0;
        Ext.batchLayouts(function(){
            me.columns.each(function (col) {
                if (col.config.flex) flex += col.config.flex
                else if (col.config.width) width -= col.config.width
                else width -= col.getWidth()
            })
            if (flex) {
                me.columns.each(function (col) {
                    if (col.config.flex) {
                        newWidth = Math.round(width * col.config.flex / flex)
                        if (col.getWidth() != newWidth) col.setWidth(newWidth)
                    }
                })
            }
        })
    }
})

问题：用户无法再调整以这种方式设置宽度的列。

Answer 2

有一个更简单的解决方法（根据 https://fiddle.sencha.com/#view/editor&fiddle/2kgh）：

只需在其子项中复制该列的弹性属性。

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name', dataIndex: 'name', flex: 1,
                items: [
                    {
                        xtype: 'textfield',
                        flex: 1
                    }
                ]
            },

在 ExtJs 6.2 中，包含项目的列不考虑其 flex 属性，是否有解决方法？

In ExtJs 6.2, a column that contains an item does not take into account its flex property, is there a workaround?

extjs

extjs6

extjs-grid