Ext JS Window Manager

WIndowManager.js

/**
 * Window Manager
 */
Ext.define('KJExt.window.WindowManager', {
    singleton: true,
    /**
     * @private
     * @property {Object} windows Map which references windowInstances by their ID
     */
    windows: {},
    /**
     * ID generator for child windows
     * @private
     * @property {Integer} idCounter
     */
    idCounter: 1,
    /**
     * Specifies the URL which the childs are navigated to when a popup is opened
     * @private
     * @property {String} popupUrl
     */
    popupUrl: null,
    /**
     * @param {String} url
     */
    setPopupUrl: function(url)
    {
        this.popupUrl = url;
    },
    /**
     * Creates a new popup with the given configuration
     *
     * @param {Object} config
     * @return {KJExt.window.NativeWindow}
     */
    createPopup: function(config)
    {
        config.url = config.url || this.popupUrl;

        var popup = Ext.create('KJExt.window.NativeWindow', config);

        this.attachPopup(popup);

        popup.on('close', function(popup) {
            this.detachPopup(popup);
        }, this);

        return popup;
    },
    /**
     * Create a new popup with the given configuration and show it
     *
     * @param {Object} config
     * @return {KJExt.window.NativeWindow}
     */
    showPopup: function(config)
    {
        var popup = this.createPopup(config);
        popup.show();

        return popup;
    },
    /**
     * Attach a window to the WindowManager
     *
     * @param {KJExt.window.NativeWindow} popup
     */
    attachPopup: function(popup)
    {
        var newId = popup.windowId = ++this.idCounter;
        this.windows[newId] = popup;
        return newId;
    },
    /**
     * Detach a window from the WindowManager
     *
     * @param {KJExt.window.NativeWindow} win
     */
    detachPopup: function(win)
    {
        delete this.windows[win.windowId];
    },
    /**
     * Retrieve (if available) a Window by the given WindowInstance
     *
     * @param {windowInstance} windowInstance
     * @return {KJExt.window.NativeWindow}
     */
    findPopupByWindow: function(windowInstance)
    {
        for (key in this.windows) {
            if (this.windows[key].windowInstance === windowInstance) {
                return this.windows[key];
            }
        }

        return null;
    },
    /**
     * Close all attached popups
     */
    closeAll: function()
    {
        Ext.Object.each(this.windows, function(key, popup) {
            popup.close();
        });
    },
    /**
     * Bootstrap a popup, will be called automatically when the current window
     * is a popup with a parent
     */
    bootstrapPopup: function()
    {
        var popupMgr            = window.opener.__windowManager,
            popupInstance   = popupMgr.findPopupByWindow(window),
            popupConfig     = popupInstance.popupConfig;

        window.popupInstance = popupInstance;
        document.title = popupInstance.title;

        Ext.onReady(function() {
            /* When popupConfig is given as a string assume it is a classname
             * that can be created directly
             */
            if (Ext.isString(popupConfig)) {
                Ext.create(popupConfig);
            } else {
                Ext.create('Ext.container.Viewport', {
                    layout: 'fit',
                    items: popupConfig
                });
            }
        });
    }

}, function() {
    /* Give the window a WindowManager value so child windows can reference
     * this singleton
     */
    window.__windowManager = this;

    /* When a parent window is available and the parent window
     * contains the __windowManager singleton then assume its the opener
     * and bootstrap the popup
     */
    if (window.opener && window.opener.__windowManager) {
        this.bootstrapPopup();
    }
});

/**
 * Native Window
 *
 * Create a Native Window which will create a browser popup
 */
Ext.define('KJExt.window.NativeWindow', {
    extend: 'Ext.Component',
    /**
     * @property {Integer} windowId Het unieke windowID
     */
    windowId: 0,
    /**
     * @param {window} windowInstance
     */
    windowInstance: null,
    /**
     * @property {String} url Location which will be opened by the popup
     */
    url: null,
    /**
     * @property {String} title
     */
    title: 'Popup',
    /**
     * @property {int} height
     */
    height: 600,
    /**
     * @property {int} width
     */
    width: 800,
    /**
     * @property {Boolean} model
     */
    modal: false,

    /**
     * @property {Boolean} resizable
     */
    resizable: false,
    /**
     * Initialize the popup
     */
    initComponent: function()
    {
        if (!this.url) {
            throw "Missing url while opening popup";
        }

        this.addEvents(
            /**
             * @event
             * Fires when the window is closed
             * @param {KJExt.window.NativeWindow} popup
             */
            'close',
            /**
             * @event
             * Fires when the window is shown
             * @param {KJExt.window.NativeWindow} popup
             */
            'show'
        );

        this.callParent(arguments);
    },
    /**
     * Create the popup
     */
    show: function()
    {
        var options = [
            'status=0',
            'toolbar=0',
            'location=0',
            'menubar=0',
            'directories=0',
            'scrollbars=0',
            'resizable=' + Number(this.resizable),
            'modal=' + Number(this.modal),
            'height=' + this.height,
            'width=' + this.width,
        ];

        this.windowInstance = window.open(
            this.url,
            this.windowId,
            options.join(',')
        );

        // Move the window to the center of the screen
        this.windowInstance.moveTo(
            (screen.width / 2) - (this.width / 2),
            (screen.height / 2) - (this.height / 2)
        );

        this.fireEvent('show', this);
    },
    /**
     * Sluit de popup
     */
    close: function()
    {
        this.fireEvent('close', this);
        this.windowInstance.close();
    }
});

window.onunload = function() {
    KJExt.window.WindowManager.closeAll();
};