3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
17 * <p>A modal, floating Component which may be shown above a specified {@link Ext.core.Element Element}, or a specified
18 * {@link Ext.Component Component} while loading data. When shown, the configured owning Element or Component will
19 * be covered with a modality mask, and the LoadMask's {@link #msg} will be displayed centered, accompanied by a spinner image.</p>
20 * <p>If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
21 * the Store's loading process.</p>
22 * <p>Because this is a floating Component, its z-index will be managed by the global {@link Ext.WindowManager ZIndexManager}
23 * object, and upon show, it will place itsef at the top of the hierarchy.</p>
24 * <p>Example usage:</p>
27 var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
33 Ext.define('Ext.LoadMask', {
35 extend: 'Ext.Component',
37 alias: 'widget.loadmask',
39 /* Begin Definitions */
42 floating: 'Ext.util.Floating'
45 uses: ['Ext.data.StoreManager'],
50 * @cfg {Ext.data.Store} store
51 * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
52 * hidden on either load success, or load fail.
57 * The text to display in a centered loading message box.
61 * @cfg {String} [msgCls="x-mask-loading"]
62 * The CSS class to apply to the loading message element.
64 msgCls : Ext.baseCSSPrefix + 'mask-loading',
67 * @cfg {Boolean} useMsg
68 * Whether or not to use a loading message class or simply mask the bound element.
73 * Read-only. True if the mask is currently disabled so that it will not be displayed
78 baseCls: Ext.baseCSSPrefix + 'mask-msg',
80 renderTpl: '<div style="position:relative" class="{msgCls}"></div>',
82 // Private. The whole point is that there's a mask.
85 // Private. Obviously, it's floating.
90 // Private. Masks are not focusable
91 focusOnToFront: false,
94 * Creates new LoadMask.
95 * @param {String/HTMLElement/Ext.Element} el The element, element ID, or DOM node you wish to mask.
96 * <p>Also, may be a {@link Ext.Component Component} who's element you wish to mask. If a Component is specified, then
97 * the mask will be automatically sized upon Component resize, the message box will be kept centered,
98 * and the mask only be visible when the Component is.</p>
99 * @param {Object} [config] The config object
101 constructor : function(el, config) {
104 // If a Component passed, bind to it.
105 if (el.isComponent) {
107 me.bindComponent(el);
109 // Create a dumy Component encapsulating the specified Element
111 me.ownerCt = new Ext.Component({
114 componentLayoutCounter: 1
118 me.callParent([config]);
121 me.bindStore(me.store, true);
126 me.renderSelectors = {
131 bindComponent: function(comp) {
133 resize: this.onComponentResize,
138 afterRender: function() {
139 this.callParent(arguments);
140 this.container = this.floatParent.getContentTarget();
145 * Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.
147 onComponentResize: function() {
149 if (me.rendered && me.isVisible()) {
156 * Changes the data store bound to this LoadMask.
157 * @param {Ext.data.Store} store The store to bind to this LoadMask
159 bindStore : function(store, initial) {
162 if (!initial && me.store) {
165 beforeload: me.onBeforeLoad,
174 store = Ext.data.StoreManager.lookup(store);
177 beforeload: me.onBeforeLoad,
184 if (store && store.isLoading()) {
189 onDisable : function() {
190 this.callParent(arguments);
197 onBeforeLoad : function() {
199 owner = me.ownerCt || me.floatParent,
201 if (!this.disabled) {
202 // If the owning Component has not been layed out, defer so that the ZIndexManager
203 // gets to read its layed out size when sizing the modal mask
204 if (owner.componentLayoutCounter) {
205 Ext.Component.prototype.show.call(me);
207 // The code below is a 'run-once' interceptor.
208 origin = owner.afterComponentLayout;
209 owner.afterComponentLayout = function() {
210 owner.afterComponentLayout = origin;
211 origin.apply(owner, arguments);
213 Ext.Component.prototype.show.call(me);
222 me.callParent(arguments);
223 me.showOnParentShow = true;
230 me.callParent(arguments);
233 msgEl.show().update(me.msg);
235 msgEl.parent().hide();
239 afterShow: function() {
240 this.callParent(arguments);
245 onLoad : function() {
246 this.loading = false;
247 Ext.Component.prototype.hide.call(this);