    /** * A simple class used to mask any {@link Ext.Container}. * * This should rarely be used directly, instead look at the {@link Ext.Container#masked} configuration. * * ## Example * *     @example miniphone *     Ext.Viewport.add({ *         masked: { *            xtype: 'loadmask' *         } *     }); * * You can customize the loading {@link #message} and whether or not you want to show the {@link #indicator}: * *     @example miniphone *     Ext.Viewport.add({ *         masked: { *            xtype: 'loadmask', *            message: 'A message..', *            indicator: false *         } *     }); * */Ext.define('Ext.LoadMask', {    extend: 'Ext.Mask',    xtype: 'loadmask',     config: {        /**         * @cfg {String} message          * The text to display in a centered loading message box.         * @accessor         */        message: 'Loading...',         /**         * @cfg {String} cls          * The CSS Class for this component         * @accessor         */        cls: Ext.baseCSSPrefix + 'loading-mask',         /**         * @cfg {String} messageCls          * The CSS class to apply to the loading message element.         * @accessor         */        messageCls: Ext.baseCSSPrefix + 'mask-message',         /**         * @cfg {Boolean} indicator          * True to show the loading indicator on this {@link Ext.LoadMask}.         * @accessor         */        indicator: true    },     getTemplate: function() {        var prefix = Ext.baseCSSPrefix;         return [            {                //it needs an inner so it can be centered within the mask, and have a background                 reference: 'innerElement',                cls: prefix + 'mask-inner',                children: [                    //the elements required for the CSS loading {@link #indicator}                     {                        reference: 'indicatorElement',                        cls: prefix + 'loading-spinner-outer',                        children: [                            {                                cls: prefix + 'loading-spinner',                                children: [                                    { tag: 'span', cls: prefix + 'loading-top' },                                    { tag: 'span', cls: prefix + 'loading-right' },                                    { tag: 'span', cls: prefix + 'loading-bottom' },                                    { tag: 'span', cls: prefix + 'loading-left' }                                ]                            }                        ]                    },                    //the element used to display the {@link #message}                     {                        reference: 'messageElement'                    }                ]            }        ];    },     /**     * Updates the message element with the new value of the {@link #message} configuration     * @private     */    updateMessage: function(newMessage) {        var cls = Ext.baseCSSPrefix + 'has-message';         if (newMessage) {            this.addCls(cls);        } else {            this.removeCls(cls);        }         this.messageElement.setHtml(newMessage);    },     /**     * Replaces the cls of the message element with the value of the {@link #messageCls} configuration.     * @private     */    updateMessageCls: function(newMessageCls, oldMessageCls) {        this.messageElement.replaceCls(oldMessageCls, newMessageCls);    },     /**     * Shows or hides the loading indicator when the {@link #indicator} configuration is changed.     * @private     */    updateIndicator: function(newIndicator) {        this[newIndicator ? 'removeCls' : 'addCls'](Ext.baseCSSPrefix + 'indicator-hidden');    }});