How should I use Ext.Window with controls

[deespater]

Good day, everyone!

I have a problem. Please give me some advice:

There is some class - Application.NodeTypesWindow, which is extended from Ext.Window. Application.NodeTypesWindow has two additional properties - typesList and propertiesGrid.

List for Application.Window


Application.NodeTypesWindow = Ext.extend(Ext.Window,
{
typesList: new Ext.Panel(
{
tbar: new Ext.Toolbar(
{items:[{text: 'Add'}]}),
width: 200,
region: 'west'
// skipped
},
propertiesGrid: new Ext.grid.GridPanel(
{
region: 'center',
tbar: new Ext.Toolbar(
{items:[{text: 'Add'}]})
// skipped
},


title: 'Node types',
modal: true,
width: 700,
closeAction: 'hide',
layout: 'border',
initComponent: function()
{
Application.NodeTypesWindow.superclass.initComponent.apply(this, arguments);
this.add(this.typesList);
this.add(this.propertiesGrid);
}
});
Then I use local variable to create an object of this class:


var window = new Application.NodeTypesWindow();
window.show();
At this step all works perfect! But when i close this window, and then trying to recreate it using the same code, I see only window, without nested controls. Inspecting window object, I see, that it has two items(which I assign in initComponent function), but I don't see they! Inserting doLayout() doesn't help.

Tell me, where I did wrong? Or maybe it is wrong method to create reusable window with complex nested controls? How I should create it?

[[email protected]]

Thats because your typeList and propertiesGrid should be factory methods instead of references to instances of Panel or GridPanel

[[email protected]]

Using your code:


Application.NodeTypesWindow = Ext.extend(Ext.Window, {

title: 'Node types',
modal: true,
width: 700,
closeAction: 'hide',
layout: 'border',

genTypesList: function() {
return new Ext.Panel({
tbar: [{text: 'Add'}],
width: 200,
region: 'west',
html : 'west panel'
// skipped
});
},
genPropertiesGrid: function() {
return new Ext.grid.GridPanel({
region: 'center',
columns : [],
store : new Ext.data.JsonStore({autoLoad:false, fields: []}),
tbar: [{text: 'Add'}]
// skipped
});
},

initComponent: function()
{
this.items = [
this.genTypesList(),
this.genPropertiesGrid()
];
Application.NodeTypesWindow.superclass.initComponent.call(this);

}
});

[deespater]

Thats because your typeList and propertiesGrid should be factory methods instead of references to instances of Panel or GridPanel

Thank you! You helped me so much!