Extjs : destroy and reopen modal window

Question

I have on my page header a preference link which open a modal window (it's for modifying user preferences like name or password).

On cancel button I close this window, but when I tried to reopened it I have this JS error :

el.addCls.apply(el, arguments);

Is I use the good way to close this window or is the problem is elsewhere ?

Here is my code :

// My window definition
Ext.define('jnotes.window.UserPreferences', {
    extend: 'Ext.window.Window',
    layout: 'fit',
    modal: true,
    renderTo: Ext.getBody(),
    title: "<s:text name='user.preferences' />",
    items: new Ext.form.Panel({
        bodyPadding: 5,
        waitMsgTarget: true,
        method: 'POST',

        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        },
        defaultType: 'textfield',
        items: [{
            ... // my fields
        }],
        buttons: [{
            text: "<s:text name='action.save'/>",
            handler: function() {
                this.up('form').fireEvent('validate');
            },
        }, {
            text: "<s:text name='action.cancel'/>",
            handler: function() {
                this.up('form').fireEvent('cancel');
            }
        }]
    })
});

var preferencesWindow = null;

// Open my window
function displayPreferences() {
    preferencesWindow = Ext.create('jnotes.window.UserPreferences');
    var form = preferencesWindow.down('form');
    form.addListener('validate', this.saveUser, this);
    form.addListener('cancel', function() {
        preferencesWindow.close();
        preferencesWindow = null;
    }, this);
    form.load({
        ... // Loading data
    });
    preferencesWindow.show();
};

Answer 1

The way you've defined your class, the form is created and shared across all instances of the class. When you destroy the window the first time, the form gets destroyed along with it and that's the end of it.

Instead, you should either: a) Specify a form configuration object:

items: {
    xtype: 'form',
    // ....
}

b) Specify the form in the initComponent method so it's bound to that instance:

Ext.define('MyFoo', {
    initComponent: function(){
        this.items = new Ext.form.Panel(...);
        this.callParent();
    }
});

Answer 2

Another solution that might fix your problem is to specify the closeAction in the window configuration:

closeAction: 'hide'

More from Extjs Docs about closeAction:

The action to take when the close header tool is clicked:

Possible values:

 'destroy' : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method. 

'hide' : hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

By default the close action value is destroy.