3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
9 * A simple utility class for generically masking elements while loading data. If the {@link #store}
10 * config option is specified, the masking will be automatically synchronized with the store's loading
11 * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
12 * element's Updater load indicator and will be destroyed after the initial load.
13 * <p>Example usage:</p>
16 var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
20 * Create a new LoadMask
21 * @param {Mixed} el The element or DOM node, or its id
22 * @param {Object} config The config object
24 Ext.LoadMask = function(el, config){
25 this.el = Ext.get(el);
26 Ext.apply(this, config);
28 this.store.on('beforeload', this.onBeforeLoad, this);
29 this.store.on('load', this.onLoad, this);
30 this.store.on('exception', this.onLoad, this);
31 this.removeMask = Ext.value(this.removeMask, false);
33 var um = this.el.getUpdater();
34 um.showLoadIndicator = false; // disable the default indicator
35 um.on('beforeupdate', this.onBeforeLoad, this);
36 um.on('update', this.onLoad, this);
37 um.on('failure', this.onLoad, this);
38 this.removeMask = Ext.value(this.removeMask, true);
42 Ext.LoadMask.prototype = {
44 * @cfg {Ext.data.Store} store
45 * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
46 * hidden on either load sucess, or load fail.
49 * @cfg {Boolean} removeMask
50 * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
51 * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
55 * The text to display in a centered loading message box (defaults to 'Loading...')
59 * @cfg {String} msgCls
60 * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
62 msgCls : 'x-mask-loading',
65 * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
71 * Disables the mask to prevent it from being displayed
78 * Enables the mask so that it can be displayed
81 this.disabled = false;
86 this.el.unmask(this.removeMask);
90 onBeforeLoad : function(){
92 this.el.mask(this.msg, this.msgCls);
97 * Show this LoadMask over the configured Element.
104 * Hide this LoadMask.
111 destroy : function(){
113 this.store.un('beforeload', this.onBeforeLoad, this);
114 this.store.un('load', this.onLoad, this);
115 this.store.un('exception', this.onLoad, this);
117 var um = this.el.getUpdater();
118 um.un('beforeupdate', this.onBeforeLoad, this);
119 um.un('update', this.onLoad, this);
120 um.un('failure', this.onLoad, this);