Question

我正在将一个外部脚本（创建一个新的窗口组件）加载到面板中，该工作正常。

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

Answer 1

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

调用回调（响应完成）和ComponentManager实际创建的组件之间可能存在计时问题。您可能必须“等待”才能创建它，然后才能连接您的监听器，类似这样（完全未经测试）：

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

Answer 2

我使用不同的方法让它工作。我生成一个唯一的密钥，注册一个绑定到生成的密钥的回调函数。然后我加载窗口传递密钥到它并让窗口自己注册，以便可以在密钥和窗口对象之间进行匹配。

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

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

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

2 个答案: