extjs gridpanel reconfigure issue - extjs

Question

I have the below to reconfigure gridpanel, it works fine the first time, but the second time it throws the following error:
JavaScript runtime error: unable to get property 'id' of undefined or null reference"
What is wrong with my code?
$.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 = [];
}
}
});

Answer 1

replace error-throwing line with
grid.reconfigure(store, columns);

Answer 2

Try clearing your store before loading new data
grid.getStore().removeAll();