javascript Extjs：销毁并重新打开模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11380842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs : destroy and reopen modal window
提问by Patrice
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 :
在取消按钮上，我关闭了这个窗口，但是当我试图重新打开它时，我遇到了这个 JS 错误：
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();
};
回答by Evan Trimboli
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:
相反，您应该： a) 指定表单配置对象：
items: {
xtype: 'form',
// ....
}
b) Specify the form in the initComponent method so it's bound to that instance:
b) 在 initComponent 方法中指定表单，使其绑定到该实例：
Ext.define('MyFoo', {
initComponent: function(){
this.items = new Ext.form.Panel(...);
this.callParent();
}
});
回答by eos
Another solution that might fix your problem is to specify the closeAction in the window configuration:
另一个可能解决您的问题的解决方案是在窗口配置中指定 closeAction：
closeAction: 'hide'
More from Extjs Docs about closeAction:
更多来自 Extjs Docs 的关于 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.
'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.
默认情况下，关闭操作值为销毁。
