EXTJS 7.2.0 CLASSIC - ВСТАВИТЬ ЗАГОЛОВКУ СЕТКИ ПРОБЛЕМА / ОШИБКА С ХРОМ 81 (РЕШЕНА)

Question

См. Пример кода и прикрепленную скрипку.

Проблема: в основном, начиная с Chrome 81 и, возможно, даже до того, как пользователи нашего приложения сообщали о проблеме с Ext.grid.Panel getHeaderContainer(). Insert не работает. По сути, у нас есть несколько динамических столбцов, которые устанавливаются, когда пользователь меняет выбор в поле со списком.

Вопрос: Кто-нибудь знает о возможном решении этой проблемы? Или знать, знает ли Сенча о проблеме и работает ли над ее исправлением?

Решение: обнаружил, что grid.columns.length больше не возвращает 0 после removeAll()

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

ExtJS 7.2.0Chrome 81 (больше не работает) Firefox 76.0.1 (работает) Edge (без хрома) (работает)

Скрипка Сенча: 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

Вместо этого вы должны использовать функцию перенастройки сетки, чтобы избежать проблем.

Ex.

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