-1

请参阅代码示例和附加的小提琴。

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

问题：有人知道此问题的可能解决方法吗？或者知道 Sencha 是否意识到了问题并正在解决问题？

解决方法：发现grid.columns.lengthremoveAll() 后不再返回 0

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

ExtJS 7.2.0 Chrome 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()
        });


    }
});
4

1 回答 1

0

您应该使用网格重新配置功能来避免出现问题。

前任。

tree.reconfigure(store);
// or
grid.reconfigure(columns);
// or
tree.reconfigure(null, columns);
于 2020-05-13T10:39:45.190 回答