PDA

View Full Version : TreePanel within TabPanel within a window fails to create the second time



wojteks27
25 Feb 2013, 5:12 AM
Hello,

after banging my head against the wall for 3 hours straight I came here looking for guidance:)

I have an application which is written using MVC model, controller is created, viewport initiated, its contents built and added to applications window items.

The application's structure looks like this :


Ext.window.Window : [
Viewport - Ext.tab.Panel (default layout): [
User Data Tab - Ext.panel.Panel (column layout with some textfields),
System Parameters Tab - Ext.form.Panel (default layout),
Wallpaper Tab - Ext.panel.Panel (border layout): [
Selection Tree - Ext.tree.Panel (region : west, default layout - connected to a store with AJAX proxy),
Selection Preview - Ext.Component (region : center, acts as a wrapper for <img> tag)
]
]
]


My problem is, that after the application (window) is closed, when I try to run it for the second time, Selection Tree fails to render. It's place is filled with white colour, and it's div in source (WallpaperTree) code has only one child div (WallpaperTree-body) and this one is empty.

I tried debugging my tree like this :


'#SettingsWallpaperTree':{
beforedestroy : function() {
console.debug('going down');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
beforerender : function() {
console.debug('about to render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
render : function() {
console.debug('render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
afterrender : function() {
console.debug('after render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
afterlayout : function() {
console.debug('after layout');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
}
}


On the first run everything goes smoothly, I see my debug messages together with object listings, but on the second run every debug returns "undefined", and every event fires twice.

If someone could point me towards what I'm messing up I would be really grateful.

Regards,
Wojtek

PS.
If my post is somehow lacking in information needed to diagnose the issue I will be more than willing to provide them. I tried to cut on code listings just because I thought it would be far too much and maybe someone knows what I'm doing wrong event without looking at the sources.

scottmartin
26 Feb 2013, 10:14 AM
Pseudo code is not going to help .. you will need to post a working example.

Are you destroying the window and trying to load it again, or perhaps you are using a hard 'id' and trying to load it twice?

Scott.

wojteks27
26 Feb 2013, 11:18 AM
I create my window with a hard id (in this exact case - id : 'settings-window'), then destroy it and create another one with the same id. The window shows up all right, but one of its components (WallpaperTree) fails to render.

I'm sure that the window gets destroyed (I checked it via Ext.WindowManager) - otherwise, and please correct me if I'm wrong, if there was a window with particular id, the window manager would prevent the application from creating another window with same id, wouldn't it?

Function which runs apps in my environment:


run:function (paramAppName, opts) {
var me = this, ar = paramAppName.split('.'),
appName = ar[0] + '.' + ar[1] + '.' + ar[2],
appPath = appname.replace(/\./g, '/');


Ext.Loader.setPath(appName, appPath);
Ext.require(paramAppName, function () {
var win, controller = Ext.create(paramAppName, {
application : myApp,
id:ar[2] + 'Controller'
});


win = me.windowCreator.createWindow();


myApp.controllers.add(controller);
controller.win = win;
controller.init();


win.addListener('beforedestroy', function() {
controller.beforeClose();
myApp.controllers.remove(controller);
}, controller);


if (win.hasTools === true) {
win.tools = [
{
type:'help',
margin:'0 10 0 0',
qtip:'Help',
handler:me.addHelpHandler(win)
}
];
}


win.show();
});




},



Settings.controller.Settings


Ext.define('Settings.controller.Settings', {
extend:'Ext.app.Controller',
requires:[
'Settings.store.ClockType',
'Settings.store.Language',
'Settings.store.MenuPosition',
'Settings.store.Wallpaper'
],
models:[
'Settings.model.Wallpaper'
],
stores:[
'Settings.store.ClockType',
'Settings.store.Language',
'Settings.store.MenuPosition',
'Settings.store.Wallpaper'
],
views:[
'Settings.view.Viewport',
'Settings.view.WallpaperTree',
'Settings.view.WallpaperPreview'
],
init:function () {
this.setViewport();
this.control({
'#SettingsViewport':{
afterlayout:this.formDrawFix
},
'#par_rob':{
change:this.preUploadAvatar
},
'#SettingsWallpaperTree':{
select:this.onSelect,
beforedestroy : function() {
console.debug('going down');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
beforerender : function() {
console.debug('about to render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
render : function() {
console.debug('render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
afterrender : function() {
console.debug('after render');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
afterlayout : function() {
console.debug('after layout');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
},
load : function() {
console.debug('load');
console.debug(Ext.getCmp('SettingsWallpaperTree'));
}
},
'#SettingsViewport button[action=save]':{
click:this.onOK
},
'#SettingsViewport button[action=close]':{
click:this.close
}


});
},
setViewport:function () {
this.win.add(Ext.create('Settings.view.Viewport'));
},
//this is bound to window beforedestroy
beforeClose : function() {
this.win.removeAll(true);
Ext.data.StoreManager.lookup('SettingsWallpaperStore').destroy();
this.win.close();
},
});



Settings.view.Viewport


Ext.define('Settings.view.Viewport', {
extend:'Ext.tab.Panel',
border:false,
id:'SettingsViewport',
requires : [
'Settings.view.DesktopPanel',
'Settings.view.ParametersForm',
'Settings.view.UserDataPanel'
],
initComponent:function () {
this.items = [
Ext.create('Settings.view.UserDataPanel'),
Ext.create('Settings.view.ParametersForm'),
Ext.create('Settings.view.DesktopPanel')
];
this.callParent();
}
});



Settings.view.DesktopPanel


Ext.define('Settings.view.DesktopPanel', {
extend : 'Ext.panel.Panel',
id : 'SettingsDesktopPanel',
title: 'Desktop panel,
layout:'border',
items:[
Ext.create('Settings.view.WallpaperTree'),
Ext.create('Settings.view.WallpaperPreview')
]
});



Settings.view.ParametersForm


Ext.define('Settings.view.ParametersForm', {
extend : 'Ext.form.Panel',
title:'Parameters form',
id:'SettingsParametersForm',
border:false,
padding:50,
defaults:{
labelWidth:300,
width:370
},
items:[
{
xtype:"numberfield",
id:"par_opoznienie1",
name:"uzk0_czas_pow",
fieldLabel:'Delay',
value:100
},
{
xtype:"combo",
id:"par_pozycja_menu",
name:"uzk0_poz_menu",
width:430,
editable:false,
fieldLabel:'Menu position',
displayField:"tekst",
valueField:"wartosc",
value:myApp.userData.uzk0_poz_menu,
store:Ext.create('Settings.store.MenuPosition')
},
{
xtype:"combo",
id:"par_jezyk",
name:"uzk0_jezyk",
width:430,
editable:false,
fieldLabel:'Language',
displayField:"tekst",
valueField:"wartosc",
value:myApp.userData.uzk0_jezyk,
store:Ext.create('Settings.store.Language')
},
{
xtype:"combo",
id:"par_zegar",
name:"uzk0_zegar",
width:430,
editable:false,
fieldLabel:'Clock position',
displayField:"tekst",
valueField:"wartosc",
value:myApp.userData.uzk0_zegar,
store:Ext.create('Settings.store.ClockType')
}
]
});



Settings.view.WallpaperTree


Ext.define('Settings.view.WallpaperTree', {
extend : 'Ext.tree.Panel',
id : 'SettingsWallpaperTree',
rootVisible:false,
width:150,
region:'west',
store:Ext.create('Settings.store.Wallpaper')
});



Regards,
Wojtek


PS.
Once again I omitted some parts of my code (like application specific functions definitions, stores and models) just because posting them would make this post incredibly long. If given details won't suffice, I'll make a zip with complete source code and attach it to my next post. Thanks in advance for your help:)

scottmartin
27 Feb 2013, 5:49 AM
What is the error in the console when you try to open the window again?
Have you tried removing the hard 'id' from your code to see if that helps? (use itemId instead)

Scott

wojteks27
27 Feb 2013, 5:53 AM
There is no error. The tree component just ends up as blank and empty div.

I'll try switching id to itemId in a moment and tell you if it worked.

Thanks;)

wojteks27
27 Feb 2013, 6:10 AM
Unfortunately it made no difference.

Should be this:
42087

Looks like this:
42088

And console:
42089

In my debug functions I swapped Ext.getCmp to Ext.ComponentQuery.query just to be able to show debug messages.

wojteks27
28 Feb 2013, 1:37 AM
Hello all ( Mr. Martin particularly ),

I did some more debugging and ended up with conclusion that container which causes trouble is 'SettingsDesktopPanel'.

I managed to solve my problem by changing:


Ext.define('Settings.view.Viewport', {
extend:'Ext.tab.Panel',
border:false,
id:'SettingsViewport',
requires : [
'Settings.view.DesktopPanel',
'Settings.view.ParametersForm',
'Settings.view.UserDataPanel'
],
initComponent:function () {
this.items = [
Ext.create('Settings.view.UserDataPanel'),
Ext.create('Settings.view.ParametersForm'),
Ext.create('Settings.view.DesktopPanel')
];
this.callParent();
}
})

To :


Ext.define('Settings.view.Viewport', {
extend:'Ext.tab.Panel',
border:false,
id:'SettingsViewport',
requires : [
'Settings.view.ParametersForm',
'Settings.view.UserDataPanel'
],
initComponent:function () {
this.items = [
Ext.create('Settings.view.UserDataPanel'),
Ext.create('Settings.view.ParametersForm'),
{
xtype : 'panel',
layout : 'border',
itemId : 'SettingsDesktopPanel',
title : 'Desktop Panel',
items : [
Ext.create('Settings.view.WallpaperTree'),
Ext.create('Settings.view.WallpaperPreview')
]
}
];
this.callParent();
}
})


Now my question is why lazy instantiation allows proper rendering, while defining container in separate file and creating it through Ext.create fails? Is it me misunderstanding mechanics of ExtJS or maybe it is a bug?

I'm using ExtJS 4.0.7 (which I should have mentioned long time ago).

Thank you for help:)