In ExtJs 6.2, a column that contains an item does

问题:

In ExtJs 6.2, there is a 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.

The thread says this be corrected in the nightly build, but ExtJs 6.2.1 is not yet available in the GPL version. Is there a workaround for this issue ?

Or would id be possible for someone to publish an override with the bugfix ?

Edit: Additional insight

Looking at the events bound to the columns and the grid I can assert that the bug is happening between the afterrender event (column.flex = 1) and the afterlayout event (column.flex = null). I don't know much of the layout run details of ExtJs, so I'm short of ideas on how to further narrow down where the offending code might be locaded. If anyone can give hints in this direction instead of a complete answer, they are also welcome.

回答1:

I found as a workaround to resize the columns once the grid is laid out. This works as it should.

The only drawback is that it lays out the columns twice.

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

Problem: A column whose width is set this way is no longer user resizeable.

回答2:

There is an easier workaround (according to https://fiddle.sencha.com/#view/editor&fiddle/2kgh):

Just duplicate the flex property of the column in its child items.

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