GridPanel Columns names changing automatically - extjs

Question

I am trying to add a GridPanle into a window. For this i have created a model, store and then created a panel and then adding this panel into window.
Facing issue with Panel column Headers.
The below is the code i am using.
function(orderModel, ex112ServiceResponse) {
var tablePopup = null;
var gridPanel = null;
var gridData = [];
var gridStore = null;
// Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'reasonCode',
mapping: 'reasonCode'
},
{
name: 'reasonCodeDescription',
mapping: 'reasonCodeDescription'
},
{
name: 'refField1',
mapping: 'refField1'
},
{
name: 'orderID',
mapping: 'orderID'
},
{
name: 'orderLineID',
mapping: 'orderLineID'
}
]
});
// Store data
//debugger;
debugger;
for (var index = 0; index < ex112ServiceResponse.objectReasonCode.length; index++) {
gridData.push(ex112ServiceResponse.objectReasonCode[index]);
}
gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: gridData
});
gridPanel = Ext.create('Ext.grid.Panel', {
id: 'gridId',
layout: 'fit'
store: gridStore,
stripeRows: true,
width: 800,
enableColumnMove: true,
enableColumnResize: true,
autoDestroy: true,
columns: [{
header: "SKU/Item Number",
dataIndex: 'refField1',
id: 'refField1',
//flex: .5,
sortable: true,
hideable: true
}, {
header: "Reason Code",
dataIndex: 'reasonCode',
id: 'reasonCode',
//flex: .5, // property defines the amount of space this column is going to take in the grid container with respect to all.
sortable: true, // property to sort grid column data.
hideable: true // property which allows column to be hidden run time on user request.
}, {
header: "Description",
dataIndex: 'reasonCodeDescription',
id: 'reasonCodeDescription',
//flex: 1,
sortable: true,
hideable: false // this column will not be available to be hidden.
},
{
header: "DO :: DO Line",
dataIndex: 'orderLineID',
id: 'doDoLine',
//flex: .5,
sortable: true,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
debugger;
var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
return do_DOLine;
}
}
]
});
tablePopup = new Ext.Window({
title: 'Cancellation Reason Codes',
id: 'crcWin'
width: 800,
closeAction: 'close',
plain: true,
autoDestroy: true,
items: [gridPanel]
});
tablePopup.show();
//Table Creation End
}
The issue is when the code create a popup for the first time. Popup looks good. But when i close the popup and clicks on a button in the second time created popup has issue. Column names have been changed.
Popup1:
Popup2:
Your help will be highly appreciated.

Answer 1

The issue is you have provided id to your extjs component and inside of window you have used config
//There is no close action in docs
closeAction: 'close'//Defaults to: 'destroy'
The closeAction to take when the close header tool is clicked:
destroy : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
hide : hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.
Note: This behavior has changed! setting does affect the close method which will invoke the appropriate closeAction.
Instead of using id you can use itemId.
In this FIDDLE, I have created a demo using your code. I hope this will help/guide you.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
function createWindow() { // Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'reasonCode',
mapping: 'reasonCode'
}, {
name: 'reasonCodeDescription',
mapping: 'reasonCodeDescription'
}, {
name: 'refField1',
mapping: 'refField1'
}, {
name: 'orderID',
mapping: 'orderID'
}, {
name: 'orderLineID',
mapping: 'orderLineID'
}]
});
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
model: 'StudentDataModel',
data: [{
reasonCode: '123',
reasonCodeDescription: 'test test',
refField1: 'it just exammple',
orderID: 1234,
orderID: 12345
}, {
reasonCode: '1231',
reasonCodeDescription: 'test1 test',
refField1: '!it just exammple',
orderID: 12341,
orderID: 123451
}]
});
var gridPanel = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: 'gridStore',
stripeRows: true,
enableColumnMove: true,
enableColumnResize: true,
autoDestroy: true,
//id: 'gridId',
columns: [{
header: "SKU/Item Number",
dataIndex: 'refField1',
//id: 'refField1',
flex: 1,
sortable: true,
hideable: true
}, {
header: "Reason Code",
dataIndex: 'reasonCode',
// id: 'reasonCode',
flex: 1,
sortable: true, // property to sort grid column data.
hideable: true // property which allows column to be hidden run time on user request.
}, {
header: "Description",
dataIndex: 'reasonCodeDescription',
// id: 'reasonCodeDescription',
flex: 1,
sortable: true,
hideable: false // this column will not be available to be hidden.
}, {
header: "DO :: DO Line",
dataIndex: 'orderLineID',
//id: 'doDoLine',
flex: 1,
sortable: true,
renderer: function (value, metadata, record, rowIndex, colIndex, store) {
var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
return do_DOLine;
}
}]
});
var tablePopup = new Ext.Window({
title: 'Cancellation Reason Codes',
width: window.innerWidth,
//id: 'crcWin',
plain: true,
modal: true,
autoDestroy: true,
closeAction: 'destroy', //If you want to use hide then you need to be show same window instead of new create
// closeAction: 'close', //https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.window.Window-cfg-closeAction
items: [gridPanel]
});
tablePopup.show();
}
Ext.create('Ext.button.Button', {
text: 'Create window',
renderTo: Ext.getBody(),
handler: createWindow
})
}
});