extjs gridpanel: ColumnModel becomes null when GridPanel window shows again - extjs

Question

I defined a GridPanel with pre-configured ColumnModel and Store, and put this GridPanel in a Ext.Window; It works fine when this window shows, however, if I close it and show it again, the ColumnModel of GridPanel becomes null so that this GridPanel cannot correctly rendered.
UPDATED (all code)
var stSummary = new Ext.data.JsonStore({ //define the store for Summary_Grid
fields : [
{
name: 'recID'
}, {
name : 'name',
}],
data: []
});
var colModelSummary = { //define the ColumnModel for Summary_Grid
columns:
[
{
header : "ID",
width : 50,
sortable : true,
menuDisabled: true,
dataIndex : 'recID'
},
{
header : "Name",
width : 100,
sortable : true,
menuDisabled: true,
dataIndex : 'name'
}
]
};
var reportConfig = {
id : 'Report_Window',
width : 250,
floating : true,
style : {
opacity : 0.7,
},
title : "Report",
layout: 'fit',
items : [{
xtype: 'tabpanel',
id: 'Report_Tab',
height: 200,
activeTab: 1,
items:
[
{
xtype : 'grid',
store : stSummary,
colModel : new Ext.grid.ColumnModel(colModelSummary),
stripeRows : true,
id : "Summary_Grid",
title : "Summary at",
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
listeners: {
'beforerender': function() {
console.log(this.getColumnModel().getColumnCount());
}
}
},
{
xtype : 'form',
id : 'Report_Form',
title: 'Item Report',
frame : true,
labelAlign : 'left',
bodyStyle : 'padding:2px',
autoScroll: true,
layout : 'column',
items : []
}
]
}],
resizable : {
dynamic : true
}
};
var reportWindow = new Ext.Window(reportConfig);
reportWindow.show();
document.onclick = myClickHandler;
function myClickHandler() {
if(!Ext.getCmp('Report_Window')) {
var reportWindow = new Ext.Window(reportConfig);
}
Ext.getCmp('Report_Window').show();
}
});
and the error:
Uncaught TypeError: Cannot read property 'length' of undefined
Ext.grid.ColumnModel.Ext.extend.getColumnCount ext-all.js:11

Answer 1

I actually just copy pasted your code into my application. I added reportWindow.show() in the end - and it works! Not sure what could be wrong, can you show all code?
Please note that it might be a close/hide problem, do you recreate your window each time?
EDIT:
Try to set closeAction: 'hide' to your window configuration.
Check this for details:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-cfg-closeAction
EDIT #2:
I tested your code again, and it works again! I only corrected several things like extra commas - my resharper suggested it. (It might cause problems in IE) Then I putted it into Ext.onReady - it works! Ext.version == '3.2.1'
Check the whole code:
Ext.onReady(function() {
var stSummary = new Ext.data.JsonStore({
//define the store for Summary_Grid
fields: [
{
name: 'recID'
}, {
name: 'name'
}],
data: []
});
var colModelSummary = {
//define the ColumnModel for Summary_Grid
columns:
[
{
header: "ID",
width: 50,
sortable: true,
menuDisabled: true,
dataIndex: 'recID'
},
{
header: "Name",
width: 100,
sortable: true,
menuDisabled: true,
dataIndex: 'name'
}
]
};
var reportConfig = {
id: 'Report_Window',
width: 250,
floating: true,
style: {
opacity: 0.7
},
title: "Report",
layout: 'fit',
items: [{
xtype: 'tabpanel',
id: 'Report_Tab',
height: 200,
activeTab: 1,
items:
[
{
xtype: 'grid',
store: stSummary,
colModel: new Ext.grid.ColumnModel(colModelSummary),
stripeRows: true,
id: "Summary_Grid",
title: "Summary at",
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
'beforerender': function() {
console.log(this.getColumnModel().getColumnCount());
}
}
},
{
xtype: 'form',
id: 'Report_Form',
title: 'Item Report',
frame: true,
labelAlign: 'left',
bodyStyle: 'padding:2px',
autoScroll: true,
layout: 'column',
items: []
}
]
}],
resizable: {
dynamic: true
}
};
var reportWindow = new Ext.Window(reportConfig);
reportWindow.show();
document.onclick = myClickHandler;
function myClickHandler() {
if (!Ext.getCmp('Report_Window')) {
reportWindow = new Ext.Window(reportConfig);
}
Ext.getCmp('Report_Window').show();
}
});