EXTJS 7.2.0 CLASSIC - GRID HEADER INSERT ISSUE/BUG WITH CHROME 81（已解决）

Question

请参阅代码示例并附上 fiddle。

问题：基本上，从 Chrome 81 开始，甚至可能在我们应用程序的用户报告 Ext.grid.Panel getHeaderContainer().insert 不工作的问题之前。基本上，当用户更改组合框中的选择时，我们会设置一些动态列。

问题：有谁知道这个问题的可能解决方法？或者知道 Sencha 是否知道该问题并正在修复？

解决方法：发现在 removeAll()

之后 grid.columns.length 不再返回 0

header.insert(0, cols) works
header.add(cols) also works

ExtJS 7.2.0 Chrome 81（不再有效） Firefox 76.0.1（有效）边缘（非铬）（有效）

煎茶 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/35vb

Ext.application({
    name : 'Fiddle',

    launch : function() {

        Ext.create('Ext.Button', {
            text: 'Change Fields',
            renderTo: Ext.getBody(),
            handler: function(button, e) {

                var grid = Ext.getCmp('testGrid');
                console.log('grid = ', grid);

                var header = grid.getHeaderContainer();
                console.log('header Before = ', header);

               //Setup the columns for Grading Period = Semester
                var cols = [{ text: 'Student ID', dataIndex: 'StudentID'},
                    { text: 'Name', dataIndex: 'LastFirst', width: 180},
                    { text: '1st Midterm Grade', dataIndex: 'GradEntA_1', width: 140, editor: 'textfield'},
                    { text: '1st Nine Weeks', dataIndex: 'GradEntA_2', width: 140, editor: 'textfield'},
                    { text: '2nd Midterm Grade', dataIndex: 'GradEntA_3', width: 140, editor: 'textfield'},
                    { text: '2nd Nine Weeks', dataIndex: 'GradEntA_4', width: 140, editor: 'textfield'},
                    { text: '1st Exam Value', dataIndex: 'GradEntB_1', width: 140, editor: 'textfield'},
                    { text: '1st Semester Value', dataIndex: 'GradEntB_2', width: 140, editor: 'textfield'},
                    { text: '1st Semester Credit', dataIndex: 'GradEntB_3', width: 140, editor: 'textfield'},
                    { text: '3rd Midterm Grade', dataIndex: 'GradEntC_1', width: 140, editor: 'textfield'},
                    { text: '3rd Nine Weeks', dataIndex: 'GradEntC_2', width: 140, editor: 'textfield'},
                    { text: '4th Midterm Grade', dataIndex: 'GradEntC_3', width: 140, editor: 'textfield'},
                    { text: '4th Nine Weeks', dataIndex: 'GradEntC_4', width: 140, editor: 'textfield'},
                    { text: '2nd Exam Value', dataIndex: 'GradEntD_1', width: 140, editor: 'textfield'},
                    { text: '2nd Semester Value', dataIndex: 'GradEntD_2', width: 140, editor: 'textfield'},
                    { text: '2nd Semester Credit', dataIndex: 'GradEntD_3', width: 140, editor: 'textfield'},
                    { text: 'Final for Term', dataIndex: 'GradFinal', width: 140, editor: 'textfield'}
                   ];

                header.removeAll();

                console.log('columns.length = ', grid.columns.length);
                //  Does not work (or used to not work, but magically does now)
                header.insert(grid.columns.length, cols);
                //  Workaround/fix
                //header.insert(0, cols);
                // or
                //header.add(cols)

                console.log('header After = ', header);


            }
        });
        Ext.create('Ext.grid.Panel', {
            title: 'Column Demo',
            id: 'testGrid',
            width: '100%',
            plugins: ['rowediting'],
            columns: [
                {text: 'First Name',  dataIndex:'firstname'},
                {text: 'Last Name',  dataIndex:'lastname'},
                {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
                {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
            ],
            forceFit: true,
            renderTo: Ext.getBody()
        });


    }
});

Answer 1

您应该使用 grid reconfigure 函数来避免出现问题。

例如。

tree.reconfigure(store);
// or
grid.reconfigure(columns);
// or
tree.reconfigure(null, columns);

EXTJS 7.2.0 CLASSIC - GRID HEADER INSERT ISSUE/BUG WITH CHROME 81（已解决）

EXTJS 7.2.0 CLASSIC - GRID HEADER INSERT ISSUE/BUG WITH CHROME 81 (SOLVED)

extjs

extjs7