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();
    }
});