add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / LoadMask.js

/**\r
 * A modal, floating Component which may be shown above a specified {@link Ext.Component Component} while loading data.\r
 * When shown, the configured owning Component will be covered with a modality mask, and the LoadMask's {@link #msg} will be\r
 * displayed centered, accompanied by a spinner image.\r
 *\r
 * If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with\r
 * the Store's loading process.\r
 *\r
 * Because this is a floating Component, its z-index will be managed by the global {@link Ext.WindowManager ZIndexManager}\r
 * object, and upon show, it will place itsef at the top of the hierarchy.\r
 *\r
 * Example usage:\r
 *\r
 *     @example\r
 *     var myPanel = new Ext.panel.Panel({\r
 *         renderTo : document.body,\r
 *         height   : 100,\r
 *         width    : 200,\r
 *         title    : 'Foo'\r
 *     });\r
 *\r
 *     var myMask = new Ext.LoadMask({\r
 *         msg    : 'Please wait...',\r
 *         target : myPanel\r
 *     });\r
 *\r
 *     myMask.show();\r
 */\r
Ext.define('Ext.LoadMask', {\r
\r
    extend: 'Ext.Component',\r
\r
    alias: 'widget.loadmask',\r
\r
    /* Begin Definitions */\r
\r
    mixins: [\r
        'Ext.util.StoreHolder'\r
    ],\r
\r
    uses: ['Ext.data.StoreManager'],\r
\r
    /* End Definitions */\r
    \r
    /**\r
     * @property {Boolean} isLoadMask\r
     * `true` in this class to identify an object as an instantiated LoadMask, or subclass thereof.\r
     */\r
    isLoadMask: true,\r
\r
    /**\r
     * @cfg {Ext.Component} target The Component you wish to mask. The the mask will be automatically sized\r
     * upon Component resize, and the message box will be kept centered.\r
     */\r
\r
    /**\r
     * @cfg {Ext.data.Store} store\r
     * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and\r
     * hidden on either load success, or load fail.\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} [msg="Loading..."]\r
     * The text to display in a centered loading message box.\r
     */\r
    msg: 'Loading...',\r
    //</locale>\r
\r
    msgCls: Ext.baseCSSPrefix + 'mask-loading',\r
\r
    msgWrapCls: Ext.baseCSSPrefix + 'mask-msg',\r
\r
    /**\r
     * @cfg {Boolean} [useMsg=true]\r
     * Whether or not to use a loading message class or simply mask the bound element.\r
     */\r
    useMsg: true,\r
\r
    /**\r
     * @cfg {Boolean} [useTargetEl=false]\r
     * True to mask the {@link Ext.Component#getTargetEl targetEl} of the bound Component. By default,\r
     * the {@link Ext.Component#getEl el} will be masked.\r
     */\r
    useTargetEl: false,\r
\r
    /**\r
     * @cfg {Boolean} shim `true` to enable an iframe shim for this LoadMask to keep\r
     * windowed objects from showing through.\r
     */\r
\r
    /**\r
     * @private\r
     */\r
    cls: Ext.baseCSSPrefix + 'mask',\r
    componentCls: Ext.baseCSSPrefix + 'border-box',\r
    \r
    ariaRole: 'status',\r
    focusable: true,\r
    tabIndex: 0,\r
    \r
    autoEl: {\r
        tag: 'div',\r
        role: 'status'\r
    },\r
\r
    childEls: [\r
        'msgWrapEl',\r
        'msgEl',\r
        'msgTextEl'\r
    ],\r
\r
    renderTpl: [\r
        '<div id="{id}-msgWrapEl" data-ref="msgWrapEl" class="{[values.$comp.msgWrapCls]}">',\r
            '<div id="{id}-msgEl" data-ref="msgEl" class="{[values.$comp.msgCls]} ',\r
                Ext.baseCSSPrefix, 'mask-msg-inner {childElCls}">',\r
                '<div id="{id}-msgTextEl" data-ref="msgTextEl" class="',\r
                    Ext.baseCSSPrefix, 'mask-msg-text',\r
                    '{childElCls}">{msg}</div>',\r
            '</div>',\r
        '</div>'\r
    ],\r
\r
    maskOnDisable : false,\r
    \r
    /**\r
     * @private\r
     */\r
    skipLayout: true,\r
\r
    /**\r
     * Creates new LoadMask.\r
     * @param {Object} [config] The config object.\r
     */\r
    constructor : function(config) {\r
        var me = this,\r
            comp;\r
\r
        if (arguments.length === 2) {\r
            //<debug>\r
            if (Ext.isDefined(Ext.global.console)) {\r
                Ext.global.console.warn('Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config');\r
            }\r
            //</debug>\r
            comp = me.target = config;\r
            config = arguments[1];\r
        } else {\r
            comp = config.target;\r
        }\r
        \r
        //<debug>\r
        if (config.maskCls) {\r
            Ext.log.warn('Ext.LoadMask property maskCls is deprecated, use msgWrapCls instead');\r
            config.msgWrapCls = config.msgWrapCls || config.maskCls;\r
        }\r
        //</debug>\r
        \r
        // Must apply configs early so that renderTo can be calculated correctly.\r
        me.callParent([config]);\r
\r
        // Target is a Component\r
        if (comp.isComponent) {\r
            me.ownerCt = comp;\r
            me.hidden = true;\r
\r
            // Ask the component which element should be masked.\r
            // Most will not have an answer, in which case this returns the document body\r
            // Ext.view.Table for example returns the el of its owning Panel.\r
            me.renderTo = me.getMaskTarget();\r
            me.external = me.renderTo === Ext.getBody();\r
            me.bindComponent(comp);\r
        }\r
        // Element support to be deprecated\r
        else {\r
            //<debug>\r
            if (Ext.isDefined(Ext.global.console)) {\r
                Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');\r
            }\r
            //</debug>\r
            comp = Ext.get(comp);\r
            me.isElement = true;\r
            me.renderTo = me.target;\r
        }\r
        me.render(me.renderTo);\r
        if (me.store) {\r
            me.bindStore(me.store, true);\r
        }\r
    },\r
\r
    initRenderData: function() {\r
        var result = this.callParent(arguments);\r
        result.msg = this.msg || '';\r
        return result;\r
    },\r
    \r
    onRender: function() {\r
        this.callParent(arguments);\r
        \r
        // In versions prior to 5.1, maskEl was rendered outside of the\r
        // LoadMask's main el and had a reference to it; we keep this\r
        // reference for backwards compatibility.\r
        this.maskEl = this.el;\r
    },\r
\r
    bindComponent: function(comp) {\r
        var me = this,\r
            listeners = {\r
                scope: this,\r
                resize: me.sizeMask\r
            };\r
\r
        if (me.external) {\r
            listeners.added = me.onComponentAdded;\r
            listeners.removed = me.onComponentRemoved;\r
            if (comp.floating) {\r
                listeners.move = me.sizeMask;\r
                me.activeOwner = comp;\r
            } else if (comp.ownerCt) {\r
                me.onComponentAdded(comp.ownerCt);\r
            }\r
        }\r
\r
        me.mon(comp, listeners);\r
        \r
        // Subscribe to the observer that manages the hierarchy\r
        // Only needed if we had to be rendered outside of the target\r
        if (me.external) {\r
            me.mon(Ext.GlobalEvents, {\r
                show: me.onContainerShow,\r
                hide: me.onContainerHide,\r
                expand: me.onContainerExpand,\r
                collapse: me.onContainerCollapse,\r
                scope: me\r
            });\r
        }\r
    },\r
\r
    onComponentAdded: function(owner) {\r
        var me = this;\r
        delete me.activeOwner;\r
        me.floatParent = owner;\r
        if (!owner.floating) {\r
            owner = owner.up('[floating]');\r
        }\r
        if (owner) {\r
            me.activeOwner = owner;\r
            me.mon(owner, 'move', me.sizeMask, me);\r
            me.mon(owner, 'tofront', me.onOwnerToFront, me);\r
        } else {\r
            me.preventBringToFront = true;\r
        }\r
        owner = me.floatParent.ownerCt;\r
        if (me.rendered && me.isVisible() && owner) {\r
            me.floatOwner = owner;\r
            me.mon(owner, 'afterlayout', me.sizeMask, me, {single: true});\r
        }\r
    },\r
\r
    onComponentRemoved: function(owner) {\r
        var me = this,\r
            activeOwner = me.activeOwner,\r
            floatOwner = me.floatOwner;\r
\r
        if (activeOwner) {\r
            me.mun(activeOwner, 'move', me.sizeMask, me);\r
            me.mun(activeOwner, 'tofront', me.onOwnerToFront, me);\r
        }\r
        if (floatOwner) {\r
            me.mun(floatOwner, 'afterlayout', me.sizeMask, me);\r
        }\r
        delete me.activeOwner;\r
        delete me.floatOwner;\r
    },\r
\r
    afterRender: function() {\r
        var me = this;\r
        \r
        me.callParent(arguments);\r
        \r
        // In IE8-11, clicking on an inner msgEl will focus it, despite\r
        // it having no tabindex attribute and thus being canonically\r
        // non-focusable. Placing unselectable="on" attribute will make\r
        // it unfocusable but will also prevent clicks from focusing\r
        // the parent element. We want clicks within the mask's main el\r
        // to focus it, hence the workaround.\r
        if (Ext.isIE) {\r
            me.el.on('mousedown', me.onMouseDown, me);\r
        }\r
\r
        // This LoadMask shares the DOM and may be tipped out by the use of innerHTML\r
        // Ensure the element does not get garbage collected from under us.\r
        this.el.skipGarbageCollection = true;\r
    },\r
    \r
    onMouseDown: function(e) {\r
        var el = this.el;\r
        \r
        if (e.within(el)) {\r
            e.preventDefault();\r
            el.focus();\r
        }\r
    },\r
\r
    onOwnerToFront: function(owner, zIndex) {\r
        this.el.setStyle('zIndex', zIndex + 1);\r
    },\r
\r
    // Only called if we are rendered external to the target.\r
    // Best we can do is show.\r
    onContainerShow: function(container) {\r
        if (!this.isHierarchicallyHidden()) {\r
            this.onComponentShow();\r
        }\r
    },\r
\r
    // Only called if we are rendered external to the target.\r
    // Best we can do is hide.\r
    onContainerHide: function(container) {\r
        if (this.isHierarchicallyHidden()) {\r
            this.onComponentHide();\r
        }\r
    },\r
\r
    // Only called if we are rendered external to the target.\r
    // Best we can do is show.\r
    onContainerExpand: function(container) {\r
        if (!this.isHierarchicallyHidden()) {\r
            this.onComponentShow();\r
        }\r
    },\r
\r
    // Only called if we are rendered external to the target.\r
    // Best we can do is hide.\r
    onContainerCollapse: function(container) {\r
        if (this.isHierarchicallyHidden()) {\r
            this.onComponentHide();\r
        }\r
    },\r
\r
    onComponentHide: function() {\r
        var me = this;\r
\r
        if (me.rendered && me.isVisible()) {\r
            me.hide();\r
            me.showNext = true;\r
        }\r
    },\r
\r
    onComponentShow: function() {\r
        if (this.showNext) {\r
            this.show();\r
        }\r
        delete this.showNext;\r
    },\r
\r
    /**\r
     * @private\r
     * Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.\r
     */\r
    sizeMask: function() {\r
        var me = this,\r
            // Need to use the closest floating component (if it exists) as the basis\r
            // for our z-index positioning\r
            target = me.activeOwner || me.target,\r
            boxTarget = me.external ? me.getOwner().el : me.getMaskTarget();\r
\r
        if (me.rendered && me.isVisible()) {\r
            // Only need to move and size the message wrap if we are outside of\r
            // the masked element.\r
            // If we are inside, it will be left:0;top:0;width:100%;height:100% by default\r
            if (me.external) {\r
                if (!me.isElement && target.floating) {\r
                    me.onOwnerToFront(target, target.el.getZIndex());\r
                }\r
                me.el.setSize(boxTarget.getSize()).alignTo(boxTarget, 'tl-tl');\r
            }\r
            \r
            // Always need to center the message wrap\r
            me.msgWrapEl.center(me.el);\r
        }\r
    },\r
\r
    /**\r
     * Changes the data store bound to this LoadMask.\r
     * @param {Ext.data.Store} store The store to bind to this LoadMask\r
     */\r
    bindStore : function(store, initial) {\r
        var me = this;\r
\r
        // If the server returns a failure, and the proxy fires an exception instead of\r
        // loading the store, the mask must clear.\r
        Ext.destroy(me.proxyListeners);\r
\r
        me.mixins.storeholder.bindStore.apply(me, arguments);\r
        store = me.store;\r
\r
        if (store) {\r
            // Skip ChainedStores to the store that does the loading\r
            while (store.getSource) {\r
                store = store.getSource();\r
            }\r
            if (!store.loadsSynchronously()) {\r
                me.proxyListeners = store.getProxy().on({\r
                    exception: me.onLoad,\r
                    scope: me,\r
                    destroyable: true\r
                });\r
            }\r
\r
            if (store.isLoading()) {\r
                me.onBeforeLoad();\r
            }\r
        }\r
    },\r
\r
    getStoreListeners: function(store) {\r
        var onLoad = this.onLoad,\r
            beforeLoad = this.onBeforeLoad,\r
            result = {\r
                // Fired when a range is requested for rendering that is not in the cache\r
                cachemiss: beforeLoad,\r
\r
                // Fired when a range for rendering which was previously missing from the cache is loaded.\r
                // buffer so that scrolling and store filling has settled, and the results have been rendered.\r
                cachefilled: {\r
                    fn: onLoad,\r
                    buffer: 100\r
                }\r
            };\r
\r
        // Only need to mask on load if the proxy is asynchronous - ie: Ajax/JsonP\r
        if (!store.loadsSynchronously()) {\r
            result.beforeload = beforeLoad;\r
            result.load = onLoad;\r
        }\r
        return result;\r
    },\r
\r
    onDisable : function() {\r
        this.callParent(arguments);\r
        if (this.loading) {\r
            this.onLoad();\r
        }\r
    },\r
\r
    getOwner: function() {\r
        return this.ownerCt || this.ownerCmp || this.floatParent;\r
    },\r
\r
    getMaskTarget: function() {\r
        var owner = this.getOwner();\r
        if (this.isElement) {\r
            return this.target;\r
        }\r
        return this.useTargetEl ? owner.getTargetEl() : (owner.getMaskTarget() || Ext.getBody());\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onBeforeLoad : function() {\r
        var me = this,\r
            owner = me.getOwner(),\r
            origin;\r
\r
        if (!me.disabled) {\r
            me.loading = true;\r
            // If the owning Component has not been layed out, defer so that the ZIndexManager\r
            // gets to read its layed out size when sizing the modal mask\r
            if (owner.componentLayoutCounter) {\r
                me.maybeShow();\r
            } else {\r
                // The code below is a 'run-once' interceptor.\r
                origin = owner.afterComponentLayout;\r
                owner.afterComponentLayout = function() {\r
                    owner.afterComponentLayout = origin;\r
                    origin.apply(owner, arguments);\r
                    me.maybeShow();\r
                };\r
            }\r
        }\r
    },\r
\r
    maybeShow: function() {\r
        var me = this,\r
            owner = me.getOwner();\r
\r
        if (!owner.isVisible(true)) {\r
            me.showNext = true;\r
        }\r
        else if (me.loading && owner.rendered) {\r
            me.show();\r
        }\r
    },\r
\r
    hide: function() {\r
        var me = this,\r
            ownerCt = me.ownerCt;\r
        \r
        // Element support to be deprecated\r
        if (me.isElement) {\r
            ownerCt.unmask();\r
            me.fireEvent('hide', this);\r
            \r
            return;\r
        }\r
        \r
        // Could be already nulled while destroying\r
        if (ownerCt) {\r
            ownerCt.enableTabbing();\r
            ownerCt.setMasked(false);\r
        }\r
        \r
        delete me.showNext;\r
        \r
        return me.callParent(arguments);\r
    },\r
\r
    show: function() {\r
        var me = this;\r
\r
        // Element support to be deprecated\r
        if (me.isElement) {\r
            me.ownerCt.mask(this.useMsg ? this.msg : '', this.msgCls);\r
            me.fireEvent('show', this);\r
            \r
            return;\r
        }\r
\r
        return me.callParent(arguments);\r
    },\r
\r
    afterShow: function() {        \r
        var me = this,\r
            ownerCt = me.ownerCt;\r
\r
        me.loading = true;\r
        me.callParent(arguments);\r
\r
        ownerCt.disableTabbing();\r
        ownerCt.setMasked(true);\r
        \r
        // Owner's disabled tabbing will also make the mask\r
        // untabbable since it is rendered within the target\r
        me.el.restoreTabbableState();\r
\r
        me.syncMaskState();\r
    },\r
\r
    /**\r
     * Synchronizes the visible state of the mask with the configuration settings such\r
     * as {@link #msgWrapCls}, {@link #msg}, sizes the mask to occlude the target element or Component\r
     * and focuses the mask.\r
     * @private\r
     */\r
    syncMaskState: function() {\r
        var me = this,\r
            ownerCt = me.ownerCt,\r
            el = me.el;\r
\r
        if (me.isVisible()) {\r
\r
            // Allow dynamic setting of msgWrapCls\r
            if (me.hasOwnProperty('msgWrapCls')) {\r
                el.dom.className = me.msgWrapCls;\r
            }\r
\r
            if (me.useMsg) {\r
                me.msgTextEl.setHtml(me.msg);\r
            } else {\r
                // Only the mask is visible if useMsg is false\r
                me.msgEl.hide();\r
            }\r
\r
            if (me.shim || Ext.useShims) {\r
                el.enableShim(null, true);\r
            } else {\r
                // Just in case me.shim was changed since last time we were shown (by\r
                // Component#setLoading())\r
                el.disableShim();\r
            }\r
\r
            // If owner contains focus, focus this.\r
            // Component level onHide processing takes care of focus reversion on hide.\r
            if (ownerCt.el.contains(Ext.Element.getActiveElement())) {\r
                me.focus();\r
            }\r
            me.sizeMask();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onLoad : function() {\r
        this.loading = false;\r
        this.hide();\r
    },\r
\r
    beforeDestroy: function() {\r
        // We don't have a real ownerCt, so clear it out here to prevent\r
        // spurious warnings when we are destroyed\r
        this.ownerCt = null;\r
        this.bindStore(null);\r
        this.callParent();\r
    },\r
\r
    onDestroy: function() {\r
        var me = this;\r
\r
        if (me.isElement) {\r
            me.ownerCt.unmask();\r
        }\r
\r
        me.callParent();\r
    }\r
});\r