PDA

View Full Version : removeAll with autoDestroy false



chrisface
17 Jan 2012, 6:14 AM
Hi there,

I have a screen where I need to switch back and forth between one master control panel, and many admin screens which stem from it. Normally just calling removeAll() on the parent container and then adding the new screen to it works fine. To save me from rebuilding the master control panel every single time a user goes back to it (which will be often and it's a big screen) I'm saving a reference to the screen and setting autoDestroy to false so I can add it back again after. Doing this however seems to stop the removeAll() from working at all though....

Here is a small simplified version of what I'm trying to do. Can anybody see where I'm going wrong?



var testWindow = new Ext.window.Window({
width: 400,
height: 400,
title: 'Testing removeAll',
tbar: [
{
text: 'removeAll(autoDestroy: false)',
handler: function(){
testWindow.removeAll(false);
testWindow.add({html: 'new screen!'})
}
},
{
text: 'removeAll(autoDestroy: true)',
handler: function(){
testWindow.removeAll(true);
testWindow.add({html: 'new screen!'})
}
}
],
items: {html: 'The component to be removed'}
});


testWindow.show();

kskrumpet
17 Jan 2012, 6:55 AM
Any particular reason you don't use a card layout and switch through the cards depending on which screen is in view? That way no removalAll is necessary.

chrisface
17 Jan 2012, 7:10 AM
I was considering using a card layout if I couldn't get this to work. The reason I decided originally not to use one was because I still have to add/remove my new card from the panel as well as calling setActiveItem. For just going back and forth between two screens where only one of the two cards is always going to be a newly constructed screen it seemed like overkill and didn't really utilise much of the card layout.

I thought I would have been taking a bit of a shortcut just doing this myself manually and with less code and a lighter component/layout but it doesn't seem to work for some reason. I think I'll be switching to the card layout now anyway to save trouble but the question on removeAll with autoDestroy set to false still stands out of curiousity because strictly it should have worked... Or does removeAll not actually do a remove :D? I was looking through the code for removeAll and what seems to trigger the actual removal is the .destroy() on the child component which then checks for parent containers and removes itself. This seems a bit weird to me.

kskrumpet
17 Jan 2012, 7:17 AM
Sorry, I was not talking about dynamically creating cards and removing them when finished with - I was talking about defining all the screens as cards and simply switching between them. AFAIK the individual card panels that start hidden won't be rendered until shown, and therefore there's no difference between doing this and doing what you're trying to do (create a pointer to the component for reuse later).

I've never tried to remove a component that I wanted to keep defined just in case I needed it again - I've always destroyed it and created it afresh when recalled (i.e. set up screens as classes and simply add a new instance of the class). So as to why destroy works in the way it does... pass. Maybe someone from Sencha will chip in...

chrisface
17 Jan 2012, 7:45 AM
I see what you mean about the card layout but there is potentially a large overhead in that. Although the other cards are not being rendered in the browser, it still goes and constructs all the cards, runs the initComponents, builds up and autoLoads stores and so on. It does this still even if you're using xtypes to define the cards. You have to be prepared to take the hit of constructing all the screens at once to be able to switch through them using the card layout. In my case I have over ten admin screens full of grids and trees and it would be quite scary to start them all up at once :) I personally prefer to build the cards manually as they're needed to prevent this.

Thanks for the tips though :)

hendricd
18 Jan 2012, 9:06 AM
Is this what you're thinking about?



var testWindow = new Ext.window.Window({
width: 400,
height: 400,
title: 'Testing removeAll',
layout : 'fit',
tbar: [
......
{
text: 'Home',
handler: function(){
var w = testWindow;
if(w.items.first() !== w.master) {
w.removeAll(true);
w.add(w.master);
w.doLayout();
}
}

],
items: {html: 'The Master', autoDestroy : false }
});


testWindow.show();
testWindow.master = testWindow.items.first();


But, the card layout would be much simpler in the long-run.