PDA

View Full Version : Optimization for show/hide Panel needed?



imwill
29 Aug 2011, 4:27 AM
I have a Welcome Panel which shows up a modal box when the app loads.
I'm creating a new instance in my Viewport.js by new App.views.WelcomePanel().show('pop');.
The Panel itself holds a close button which calls hide() on the instance I created before.

I also have a welcome panel button in my app to show the hidden panel again. It it using Ext.getCmp to show the welcome panel again.

I want to avoid that the same modal box is created over and over again when pressing the welcome button.
Is that technique alright from the view of perfomance? Or does it need any optimization? (:|

welcome panel button

...
handler: function() {
Ext.getCmp('welcome-panel').show();
}


WelcomePanel.js

App.views.WelcomePanel = Ext.extend(Ext.Panel, {

initComponent: function() {
var config = {
id: 'welcome-panel',
floating: true,
modal: true,
centered: true,
styleHtmlContent: true,
html: '<p>This is a modal, centered and floating panel. hideOnMaskTap is true by default so ' +
'we can tap anywhere outside the overlay to hide it.</p>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Welcome'
},
{
dock: 'bottom',
xtype: 'button',
ui: 'action',
text: 'close',
scope: this,
handler: function() {
this.hide();
}
}
],
scroll: 'vertical'
}
Ext.apply(this, config);
App.views.WelcomePanel.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('welcome-panel', App.views.WelcomePanel);

arthurakay
29 Aug 2011, 12:18 PM
Ext.getCmp() is never good to use in an application.

Create a local reference to the instance instead.



var win = new App.views.WelcomePanel();
win.show();

...

win.hide(); //etc...

imwill
29 Aug 2011, 2:29 PM
Oh I see, thanks for pointing it out.

But how would I deal with a local var if my home button is located in another panel let's say SchedulePanel.js.
How could I access the local var win in my Viewport.js then?:s