代码之家 › 专栏 › 技术社区 › Sandor Drieënhuizen

如何访问加载到面板中的窗口

extjs

Sandor Drieënhuizen · 技术社区 · 15 年前

我正在将一个外部脚本(创建一个新的窗口组件)加载到一个面板中,这个面板工作正常。

现在,我想从回调函数访问已创建的窗口以注册 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 它的事件处理程序?

2 回复 | 直到 15 年前

Brian Moeskau 15 年前

最简单的解决方案是将关闭处理程序简单地包含在从服务器返回的窗口配置中,使用 listeners 配置,这样您就可以完全避免回调,但我假设有一些原因您不能这样做?

调用回调(响应完成)和组件管理器实际创建的组件之间可能存在时间问题。您可能需要“等待”它被创建,然后才能附加您的侦听器,类似这样(完全未测试):

panel.load({
    scripts: true,
    url: '/createWindow',
    callback: function(el, success, response, options) {
        var attachCloseHandler = function(){
            var win = panel.findByType("window")[0];
            if(win){
                win.on("close", function { alert("Closed"); });
            }
            else{
                // if there's a possibility that the window may not show
                // up maybe add a counter var and exit after X tries?
                attachCloseHandler.defer(10, this);
            }
        };
    }
});

Sandor Drieënhuizen 15 年前

我用另一种方法让它工作。我生成一个唯一的键,注册一个绑定到生成的键的回调函数。然后我加载传递键给它的窗口,并让窗口本身注册,以便在键和窗口对象之间进行匹配。

这个解决方案需要一些管道,但我认为它比依赖时间安排更优雅、更可靠。

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

然后,在部分视图中(注意这些是生成extjs代码的Coolite(ext.net)控件):

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