extjs 网格面板重新配置问题

Posted 2023-02-26

【中文标题】extjs 网格面板重新配置问题

【英文标题】：extjs gridpanel reconfigure issue

【发布时间】：2016-02-23 07:54:03

【问题描述】：

我有以下要重新配置gridpanel，第一次工作正常，但第二次抛出以下错误：

javascript 运行时错误：无法获取未定义或空引用的属性 'id'"

我的代码有什么问题？

$.ajax(
        url: "/Home/Create",
        data: JSON.stringify( inputdata: selectedValues ),
        async: false,
        type: "POST",
        contentType: 'application/json',
        success: function (result) 

                var columns = [];
                var _fields = [];
                var data = 
                    Key: [],
                    Value: []
                ;

                var nameCount = 0;
                var resultSet = result.result;
                resultSet.forEach(function (element) 
                    for (var key in element) 
                        if (element.hasOwnProperty(key)) 
                            var keyStr = key;


                                    data.Key.push(keyStr);
                                    data.Value.push(element[key]);


                            
                        
                    

                );

                var column;

                var count = 0;
                resultSet.forEach(function (element, index, ar) 

                    for (var key in element) 
                        if (!element.hasOwnProperty(key)) continue;
                        if (element.hasOwnProperty(key)) 
                            var field = ;
                            var elementValue = element[key];
                            var typeCheck = typeof elementValue;

                            field['name'] = key;
                            if (key.startsWith('Completed')) 
                                field['type'] = 'date';
                                field['submitFormat'] = 'm/d/Y';
                                field['submitValue'] = true;
                            
                            else 
                                switch (typeCheck) 
                                    case 'number':
                                        field['type'] = 'int';
                                        break;
                                    case 'boolean':
                                        field['type'] = 'string';
                                        break;
                                    case 'string':
                                        field['type'] = 'string';
                                        break;
                                    case 'object':
                                        field['type'] = 'object';
                                        break;
                                    case 'date':
                                        field['type'] = 'date';
                                        break;
                                    default:

                                
                            

                            _fields.push(field);
                            if (key == 'EmployeeId' || key == 'EmployeeGroup'
                                || key == 'GroupMemberId') 
                                column = Ext.create('Ext.grid.column.Column', 
                                    text: key,
                                    dataIndex: key,
                                    hidden: true
                                );
                                columns.push(column);
                            
                            else 
                                if (!key.startsWith('EmployeeName') && !key.startsWith('EmployeeStatus') && !key.startsWith('Completed')) 
                                    column = Ext.create('Ext.grid.column.Column', 
                                        text: key,
                                        dataIndex: key,
                                        width: 80
                                    );
                                    columns.push(column);

                                

                            

                        
                    
                );

                        var keyValue = data.Key;
                        var values = data.Value;
                        var nameKeyValue = [];
                        var nameFinalValue;
                        for (var i = 0; i < keyValue.length; i++) 
                            for (var j = 0; j < values.length; j++) 
                                if (keyValue[i].startsWith('Name')) 
                                    nameKeyValue.push(values[j]);
                                

                            
                        
                        for (var i = 0; i < keyValue.length; i++) 
                            nameFinalValue = nameKeyValue[i];

                                if (keyValue[i].startsWith('Name')) 

                                    var status = keyValue[i + 1];
                                    var completed = keyValue[i + 2];
                                    column = Ext.create('Ext.grid.column.Column', 
                                        text: nameFinalValue,
                                        dataIndex: nameFinalValue,
                                        columns: [
                                            Ext.create('Ext.grid.column.Column', 
                                                text: 'Employee Status',
                                                dataIndex: status,
                                                width: 80,
                                                stopSelection: false,
                                                editable: true,
                                                editor: 
                                                    xtype: 'checkbox'
                                                ,
                                                field:  xtype: 'checkbox' 
                                            ),
                                            Ext.create('Ext.grid.column.Column', 
                                                text: 'Completed',
                                                dataIndex: completedOn,
                                                width: 80,
                                                editor: new Ext.form.DateField(
                                                    xtype: 'datefield',
                                                    format: 'm/d/y',
                                                    renderer: Ext.util.Format.dateRenderer('m/d/Y')
                                                )
                                            )
                                        ]
                                    );
                                    columns.push(column);
                                


                        


                // *** new code
                var store = Ext.create("Ext.data.Store", 
                    id: 'myStore',
                    fields: _fields,
                    groupField: 'Group',
                    proxy: 
                        type: 'ajax',
                        reader: 
                            type: 'json',
                            root: 'data'
                        
                    
                );
                var grid = App.myGrid;

                grid.reconfigure(Ext.getStore('myStore'), columns);//this line throws error
                grid.getStore().loadData(result.result);
                grid.getView().refresh();

                selectedValues = [];

            
        
    );

【问题讨论】：

请发布您的错误的完整文本

【参考方案1】：

将抛出错误的行替换为 grid.reconfigure(store, columns);

【讨论】：

感谢您的回复，但我已经尝试过了，但没有成功

请详细说明您的答案，例如提供代码示例并解释为什么您的建议应该有效

【参考方案2】：

在加载新数据之前尝试清除您的商店

grid.getStore().removeAll();

【讨论】：

对了，为什么要在reconfigure之后调用loadData？

grid.getStore.removeAll() 没有解决问题（错误仍然存​​在）。另外，在使用新的存储和列重新配置网格面板结构后，我正在使用 loadData 加载数据。