PDA

View Full Version : Problem with destroying and recreating panel



grassator
25 Jul 2011, 7:32 AM
I have two panels in my application that are never used simultaneously so I try to be good on performance and destroy panel on deactivate event like tutorials suggest. The problem is that when I try to recreate this panel later i get JavaScript error:


sencha-touch-debug.js:28890 TypeError: 'undefined' is not an object (evaluating 'dom.parentNode')

I've spent all day trying to figure this and this is the minimal code that shows the problem. I'm using Sencha Touch 1.10. All panels are just extended Ext.Panel classes. I would appreciate any help and can provide ready-to-test app if necessary.


Ext.regController('User', {
index: function() {
var loginPanel = this.render({
xtype: 'login-panel',
listeners: {
deactivate: function(loginPanel) {
loginPanel.destroy();
},
}
});
Ext.getCmp('viewport').setActiveItem(Ext.getCmp('login'));
setTimeout(function(){
Ext.dispatch({
controller: 'User',
action: 'login'
})
}, 5000);
},
login: function() {
var settings = this.render({
xtype: 'settings-panel',
listeners: {
deactivate: function(settings) {
settings.destroy();
}
}
});
Ext.getCmp('viewport').setActiveItem(settings, {
type: 'slide', direction: 'left'
});
setTimeout(function(){
Ext.dispatch({
controller: 'User',
action: 'index'
})
}, 5000);
}
});

grassator
28 Jul 2011, 4:11 AM
After some digging I found similar thread (http://www.sencha.com/forum/showthread.php?137702-Recreating-a-previously-destroyed-panel-causes-JavaScript-exception&highlight=recreating) but there was no explanation as to why this is happening or how to fix it.

In my case problem was in Panel configuration. I was specifying some of the items inline like this:

items: [{ xtype: 'toolbar' }]

When I moved all my initialization to initComponent everything started working just fine. I hope that helps others.

snoekie
28 Jul 2011, 5:27 AM
I have encountered the same problem. Moving the items definition into the initComponent method resolved it though.

keckeroo
14 Aug 2011, 3:00 PM
Same problem here - trying to optimize memory but get the exact same error when trying to add the same component a second time.



var a = {
xtype: 'panel',
html: 'Panel A'
};

var b = {
xtype: 'panel',
html: 'Panel B'
};

... etc for as many panels as I want to create ...

var p = new Ext.Panel({
layout: 'card',
activeItem: 0,
items: [{
xtype: 'panel',
title: 'Main',
html: 'main panel'
}],
showHome: function() {
this.setActiveItem(0);
},
setCard: function(config) {
this.setActiveItem(this.add(config));
},
listeners: {
'cardswitch': function(p, nc, oc, index) {
if (oc && index == 0) {
// switching back to 'home' - destroy the old card (oc)
p.remove(oc);
}
}
}
});


so - this is it in a nutshell (navigation / add panel controllers removed for brevity)

the "this.setActiveItem ..." works the first time - but NOT THE SECOND TIME with the same config.
however - if i have 3 different configs - and never try to reuse them - i can switch between the home and any of the different configs. The error happens whenever i try to REUSE a config i've used before.
I've check and it appears the config variable is still there - still has the values - etc. I just cant reuse it! weird.

SimonFlack
12 Sep 2011, 2:48 AM
Same here.. Arrrggg

grassator
12 Sep 2011, 3:09 AM
Same here.. Arrrggg

Don't use items property for creating components. Do it programmatically in the initComponent method (and don't forget to call parent).

SimonFlack
12 Sep 2011, 3:34 AM
So I cant use xtypes? I have to create custom components for everything? I have a quite complex app with many levels of nesting.

I think it might be quicker for me to just find and fix the bug.

grassator
12 Sep 2011, 4:54 AM
So I cant use xtypes? I have to create custom components for everything? I have a quite complex app with many levels of nesting.
You can use and destroy components freely if they don't have any child items, if they do you have create custom components but it isn't as bad as it sounds. I have app with around 15 custom panels and each of them has at least a few standard controls. In the end app becomes a lot cleaner and easier to maintain that way.


I think it might be quicker for me to just find and fix the bug.
It would be great if you do that but I'm not sure what is the policy for committing changes to sencha touch,

Rhoover
13 Sep 2011, 7:52 AM
Does this help?:


Ext.regController('NoteEditor', {
noteeditor: function() {
if ( ! this.noteeditorView || this.noteeditorView.isDestroyed) {
this.noteeditorView = this.render ({
xtype: 'noteEditorPanel',
listeners: {
deactivate: function(noteeditorView) {
noteeditorView.destroy();
}
}
});
}
this.application.viewport.setActiveItem(this.noteeditorView);
}
});

DerPicknicker
7 Dec 2011, 3:28 AM
Hey guys,

thank you so much for this hint!