In Sencha ExtJS how not to Thrash Precious Memory with Popup Forms

Typically, in the callback of a button that opens a popup window, we just create the window, get access to it’s form and then show it.  The code looks something like this:

var data = this.getSessionDetailPanel().data,                
    store = this.getSessionsStore(),                        
    session = store.getById(data.id),
    formWindow = Ext.create('widget.sessionform'),
    form = formWindow.down('form').getForm();
// do stuff...
formWindow.show();

Assuming the above code is in a Sencha ExtJS button handler that brings up the form, the problem is that when the form gets close, the form panel gets deleted (destroyed) and the next time you use it, it all has to be created again.

A better solution is to add to the form panel definition autoDestroy: false and then keep the created form even after it is closed, and reuse it the next time.  That code might look like the following:

var data = this.getSessionDetailPanel().data,                
    store = this.getSessionsStore(),                        
    session = store.getById(data.id);
if (!this.formWindow) {
    this.formWindow = Ext.create('widget.sessionform');
}
form = this.formWindow.down('form').getForm();
this.formWindow.show();

Hope this helps!