PDA

View Full Version : my html is deleted when I destroy an object.



wceuppens
5 Jul 2010, 7:24 AM
I have an initial welcome screen hardcoded in html (HTML):

<div id="initieel_welkom.data" class="x-hide-display">
<p><br><img src="img/ico/flag_nl.png" alt="nederlands" /> Selecteer een optie van het menu aan de linkerzijde.</p>
<p><br><img src="img/ico/flag_fr.png" alt="français" /> Sélectionnez une option du menu à gauche.</p>
<p><br><img src="img/ico/flag_uk.png" alt="English" /> Select an option from the menu on the left.</p>
</div>This code is used in a simple panel (PANEL):

Ext.ns("TPL.panel");

TPL.panel.initieel_welkom = Ext.extend(Ext.Panel, {
id : 'initieel_welkom.card',
title : 'welcome',
contentEl : 'initieel_welkom.data',
autoScroll : true,
border : false
});
Ext.reg('TPL.panel.initieel_welkom', TPL.panel.initieel_welkom);When the panel is rendered (or instanciated), HTML becomes encapsulated by PANEL (found that in the html)

When I log out of my application, PANEL and the containing HTML are destroyed. So when I log in again without refreshing the page, Extjs gives an error because it no longer finds HTML.

Is there a way to prevent Extjs from deleting HTML?
Or should I forget about using contentEl?

Animal
5 Jul 2010, 7:39 AM
Don't destroy?

wceuppens
5 Jul 2010, 7:47 AM
That's like a friend of mine once said: working tires me, so I stopped working(:|
But seriously, destroying is good practise, isn't it?

wceuppens
5 Jul 2010, 8:09 AM
Taking out HTML and modifying PANEL did the trick...

Ext.ns("TPL.panel");

TPL.panel.initieel_welkom = Ext.extend(Ext.Panel, {
id : 'initieel_welkom.card',
title : 'welcome',
// contentEl : 'initieel_welkom.data',
html : '<div id="initieel_welkom.data"> \
<p><br><img src="img/ico/flag_nl.png" alt="nederlands" /> Selecteer een optie van het menu aan de linkerzijde.</p> \
<p><br><img src="img/ico/flag_fr.png" alt="français" /> Sélectionnez une option du menu à gauche.</p> \
<p><br><img src="img/ico/flag_uk.png" alt="English" /> Select an option from the menu on the left.</p> \
</div>',
autoScroll : true,
border : false
});
Ext.reg('TPL.panel.initieel_welkom', TPL.panel.initieel_welkom);

Animal
5 Jul 2010, 9:17 AM
Destroying is good unless you want to use something again!

wceuppens
5 Jul 2010, 10:12 AM
tried that but:
- at the login window, the old viewport remains in the background
- when I hide the viewport, my login window doesn't show up
- when I only build the viewport when it doesn't exist yet, it shows the last screen, but stops responding....; the alternative is building a new viewport without destroying the old one at each login.

I know, there are thousand ways to do something in Extjs, but it's hard to find one that works...

hendricd
6 Jul 2010, 7:02 AM
tried that but:
- at the login window, the old viewport remains in the background
- when I hide the viewport, my login window doesn't show up
- when I only build the viewport when it doesn't exist yet, it shows the last screen, but stops responding....; the alternative is building a new viewport without destroying the old one at each login.
...

@wceuppens --

Keep in mind that the Viewport manages the <body> of the page [where all elements (including your login window) must live to be visible].

Hiding the Viewport hides the <body> tag, so that's out...
Destruction of the Viewport would attempt removal of the <body> tag (which Ext.Core will not permit!), so that's out too....

You best bet would be to mask the body itself:

Ext.getBody().mask()
...then show your login Window, and remove the mask after Auth:
Ext.getBody().unmask()