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.
Your help will be highly appreciated.
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:
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
})
}
});