EXTJS 7.2.0 CLASSIC - GRID HEADER INSERT ISSUEBUG WITH CHROME 81 (SOLVED)

Question

请看代码示例和附件中的fiddle。

问题:基本上，从Chrome 81开始，甚至在Chrome 81之前，我们应用程序的用户已经报告了一个Ext.grid.Panel getHeaderContainer().insert无法工作的问题。基本上，我们有一些动态列，当用户在组合框中更改选择时，这些列会被设置。

问题:有谁知道这个问题可能的解决方法吗？或者知道Sencha是否意识到了这个问题并在努力解决？

解决方法:找到了 grid.columns.length 在removeAll()之后不再返回0。

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

ExtJS 7.2.0Chrome 81(不再工作)Firefox 76.0.1(工作)Edge(非chromium)(工作)

Sencha Fiddle。https:/fiddle.sencha.com#vieweditor&fiddle35vb。

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

你应该使用 网格重构 功能，而是为了避免问题。

前。

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