Как получить доступ к окну, загруженному в панель

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

Я заставил его работать, используя другой подход. Я генерирую уникальный ключ, регистрирую функцию обратного вызова, привязанную к сгенерированному ключу. Затем я загружаю окно, передавая ему ключ, и сама окно регистрируется, чтобы можно было найти соответствие между ключом и объектом окна.

Это решение требует некоторой сантехники, но я думаю, что оно более элегантно и надежнее, чем полагаться на время.

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

Затем в частичном представлении (обратите внимание, это элементы управления Coolite (Ext.Net), которые генерируют код ExtJs):

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

Answer 2

Самым простым решением было бы просто включить ваш обработчик закрытия в конфигурацию окна, которая возвращается с сервера с помощью конфигурации 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);
            }
        };
    }
});