Extjs：销毁并重新打开模态窗口答案

【问题标题】：Extjs : destroy and reopen modal windowExtjs：销毁并重新打开模态窗口
【发布时间】：2012-07-08 05:19:51
【问题描述】：

我的页面标题上有一个首选项链接，它打开一个模式窗口（用于修改用户首选项，如姓名或密码）。

在取消按钮上，我关闭了这个窗口，但是当我试图重新打开它时，我遇到了这个 JS 错误：

el.addCls.apply(el, arguments);

是我使用了关闭这个窗口的好方法还是问题出在其他地方？

这是我的代码：

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

【问题讨论】：

您使用的是什么版本的 ExtJs？错误到底发生在哪里？
显示调用时发生错误。
附加信息：我在 Firebug 中使用断点，它发生在我的表单对象的 addCls 调用中。

标签： javascript extjs window modal-dialog

【解决方案1】：

另一个可能解决您的问题的解决方案是在窗口配置中指定 closeAction：

closeAction: 'hide'

Extjs Docs 中关于 closeAction 的更多信息：

点击关闭页眉工具时的动作：

可能的值：

'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.

默认关闭操作值为destroy。

【讨论】：

【解决方案2】：

您定义类的方式是创建表单并在类的所有实例之间共享。当你第一次销毁窗口时，窗体也随之销毁，这就是它的结束。

相反，您应该： a) 指定表单配置对象：

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

b) 在 initComponent 方法中指定表单，使其绑定到该实例：

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

【讨论】：

就是这样！下次我不会忘记这个。非常感谢！