What would be the best practice for webapp using ExtJS?

[whalethewise]

Hi
I am very new with ExtJS and my question is about App structure recommended when using ExtJS 4.

I have header with menu that switches between different modules (pretty much constant).
Footer with some info (constant).
And middle part where modules are executed.
Each module is quite complicated thing and my question is what would be the best way to dynamically load/unload module from the middle

I was thinking to create viewport with border layout and add Header to north and Footer to south. But I am stuck on what to do when I select module. Will it be better to reload new page with the same structure, recreate the same Header and Footer and load new MainModule class or may be there is a better way to unload Components from 'center', destroy classes and load new chunk?

Thanks

[skirtle]

Border layout generally throws a bit of a strop if you try to add or remove components from it. The standard approach for handling this is to wrap your center region in an extra level of container with a fit layout and then switch the child item of the container.

Something like:


// Exactly how you choose to instantiate the viewport is up to you
new Ext.container.Viewport({
...,
layout: 'border',
items: [
...,
{
layout: 'fit',
region: 'center',
xtype: 'container',
items: {
// The item you want in the center goes here
}
}
]
});

You can then do remove/add on the container.

This is touched upon in the docs:

http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

[whalethewise]

Thank you for your answer.

My only concern is the 'memory' part. If I instantiate class that represents module and add it to the 'center' container of layout, when I switch modules will extjs release memory used by old module class when it is removed from 'center' container?

Thanks

[skirtle]

All resources should be released when a component is destroyed. Removing a component from a container will destroy it and all of its children by default (see the docs).

Memory leaks are definitely possible in ExtJS. The library itself is usually quite good for memory leaks but many applications contain errors that cause small leaks. In your case the key thing would be to pay careful attention to any links formed between your center region and the other two regions. If you pass components or functions from the center region to one of the other two regions there is the potential to cause a small leak. The key is simply to make sure such links are broken when the center region is replaced.

Even if you do have a leak, the component destruction process is designed so that a single leaking reference won't capture the entire component graph.

I personally wouldn't allow the fear of memory leaks decide this aspect of my app design.