Memory & performance when extending components

[ViaoV]

I am building a fairly large application with Extjs. It basically consists of a Tab Panel and tool bar menu. Various, fairly complicated tabs, are added to the tab panel via Tool button menu clicks. Because some times the tabs can have multiple instances I moved away from using Ids at all and Ext.getCmp. So I just started referencing everything with javascript variables. Though this seemed to get complicated and tricky in some instances and after looking at the RSS example i decided to just start extending panels to create the tab panels.

So far this works perfectly and having the this keyword to fall back on is really helpful. However, it is getting fairly extensive and the memory usage is starting to rise. I am assuming there is a performance hit when extending the components as the components structure and the initialized object are both in memory, thus everything is using twice the amount of memory? I am just wondering how severe the performance hit will be, should I go back to functions that just create panels and add them to the tab panel or stay with extended panels and functions that just initialize them?

I tried looking around on the forums and could only find things about memory leaking. Sorry if this has been gone over.

[tryanDLS]

Extending a Component is not causing memory issues - this feature is used extensively thru out the framework - look at hierarchy of Panel. Extending it one more layer isn't going to cause problems.

That being said, extending just to configure a Panel is unnecessary if you're not adding new functionality.

I would suggest that you look at some other areas of optimization, starting with how you create/destroy components. If you're adding things to a Component that it doesn't know about, it can't destroy them for you when it's torn down.

Hard to be specific without seeing code.

[ViaoV]

I see. So then for example, if I extend a grid panel and I configure its store with something like:



this.store=new Ext.data.JsonStore()
...
Ext.apply(this,{store: this.store});
When the panel is destroyed does it know about the store object since its passed in the apply or would I need to override the panels destroy method and release the object myself? Same with things like items in a panel that I am generating with this.someSubPanel and then later adding to the items array in the apply statement.

[tryanDLS]

In that specific case, store is destroyed for you b/c GridPanel knows it has a store property already - you're just setting a value. See GridPanel.onDestroy. If you add some other property that contains some complex object, you need to destroy it in your onDestroy, then call the ancestor.

I would suggest you read some of the stuff at http://extjs.com/learn/Tutorials#Advanced

these will give you a better of understanding of many of these issues.