Extjs 如何访问加载到面板中的窗口
我正在将一个外部脚本(创建一个新的窗口组件)加载到一个面板中,效果很好 现在,我想从回调函数访问创建的窗口,以注册一个Extjs 如何访问加载到面板中的窗口,extjs,Extjs,我正在将一个外部脚本(创建一个新的窗口组件)加载到一个面板中,效果很好 现在,我想从回调函数访问创建的窗口,以注册一个closed事件处理程序。我尝试了以下方法: panel.load({ scripts: true, url: '/createWindow', callback: function(el, success, response, options) { panel.findByType("window")[0].on("close", fun
closed
事件处理程序。我尝试了以下方法:
panel.load({
scripts: true,
url: '/createWindow',
callback: function(el, success, response, options) {
panel.findByType("window")[0].on("close", function { alert("Closed"); });
}
});
但是,面板似乎一直是空的,findByType
方法不断返回空集合。我曾尝试为事件添加事件处理程序,例如added
,但没有一个被触发
我不想在窗口配置中包含处理程序,因为窗口是从几个地方创建的,所有这些地方都需要不同的刷新策略
因此,问题是:如何访问面板中的窗口以在其上注册我的
close
事件处理程序?最简单的解决方案是只需将关闭处理程序包含在使用侦听器
配置从服务器返回的窗口配置中,这样就可以完全避免回调,但我想你不能这么做是有原因的吧
调用回调(响应完成)和ComponentManager实际创建的组件之间可能存在时间问题。在附加侦听器之前,您可能必须“等待”它被创建,类似于这样(完全未经测试):
我用一种不同的方法让它工作。我生成一个唯一的键,注册一个绑定到生成键的回调函数。然后,我加载窗口,将键传递给它,并让窗口寄存器本身,以便在键和窗口对象之间进行匹配 这个解决方案需要一些管道,但我认为它比依赖计时更优雅、更可靠
var _windowCloseHandlers = [];
var _windowCounter = 0;
var registerWindow = function(key, window) {
var i;
for (i = 0; i < _windowCounter; i++) {
if (_windowCloseHandlers[i].key == key) {
window.on("close", _windowCloseHandlers[i].closeHandler);
}
}
};
var loadWindow = function(windowPanel, url, params, callback) {
if (params == undefined) {
params = { };
}
windowPanel.removeAll(true);
if (callback != undefined) {
_windowCloseHandlers[_windowCounter] = {
key: _windowCounter,
closeHandler: function() {
callback();
}
};
}
Ext.apply(params, { windowKey: _windowCounter++ });
Ext.apply(params, { containerId: windowPanel.id });
windowPanel.load({
scripts: true,
params: params,
url: url,
callback: function(el, success, response, options) {
#{LoadingWindow}.hide();
}
});
};
谢谢我已经更新了这个问题来解释为什么我不想在窗口配置中包含关闭处理程序。我现在无法测试您的解决方案,但我会尽快测试。我不喜欢用计时器解决计时问题(我认为这不是更好的做法),我仍然想知道是否有办法捕捉渲染完成时(应该?)引发的事件。
var _windowCloseHandlers = [];
var _windowCounter = 0;
var registerWindow = function(key, window) {
var i;
for (i = 0; i < _windowCounter; i++) {
if (_windowCloseHandlers[i].key == key) {
window.on("close", _windowCloseHandlers[i].closeHandler);
}
}
};
var loadWindow = function(windowPanel, url, params, callback) {
if (params == undefined) {
params = { };
}
windowPanel.removeAll(true);
if (callback != undefined) {
_windowCloseHandlers[_windowCounter] = {
key: _windowCounter,
closeHandler: function() {
callback();
}
};
}
Ext.apply(params, { windowKey: _windowCounter++ });
Ext.apply(params, { containerId: windowPanel.id });
windowPanel.load({
scripts: true,
params: params,
url: url,
callback: function(el, success, response, options) {
#{LoadingWindow}.hide();
}
});
};
<ext:Window runat="server" ID="DetailsWindow">
<Listeners>
<AfterRender AutoDataBind="true" Handler='<%# "registerWindow(" + Request["WindowKey"] + ", " + Detailswindow.ClientID + ");" %>' />
</Listeners>
</ext:Window>
loadWindow(#{ModalWindowPanel}, '/Customers/Details', {customerId: id },
function() {
#{MainStore}.reload(); \\ This is the callback function that is called when the window is closed.
});