|
1
by Deng Dongpo
initial |
1 |
/*
|
2 |
* Ext JS Library 2.2.1
|
|
3 |
* Copyright(c) 2006-2009, Ext JS, LLC.
|
|
4 |
* licensing@extjs.com
|
|
5 |
*
|
|
6 |
* http://extjs.com/license
|
|
7 |
*/
|
|
8 |
||
9 |
/**
|
|
10 |
* @class Ext.LoadMask
|
|
11 |
* A simple utility class for generically masking elements while loading data. If the {@link #store}
|
|
12 |
* config option is specified, the masking will be automatically synchronized with the store's loading
|
|
13 |
* process and the mask element will be cached for reuse. For all other elements, this mask will replace the
|
|
14 |
* element's Updater load indicator and will be destroyed after the initial load.
|
|
15 |
* <p>Example usage:</p>
|
|
16 |
*<pre><code>
|
|
17 |
// Basic mask:
|
|
18 |
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
|
|
19 |
myMask.show();
|
|
20 |
</code></pre>
|
|
21 |
* @constructor
|
|
22 |
* Create a new LoadMask
|
|
23 |
* @param {Mixed} el The element or DOM node, or its id
|
|
24 |
* @param {Object} config The config object
|
|
25 |
*/
|
|
26 |
Ext.LoadMask = function(el, config){ |
|
27 |
this.el = Ext.get(el); |
|
28 |
Ext.apply(this, config); |
|
29 |
if(this.store){ |
|
30 |
this.store.on('beforeload', this.onBeforeLoad, this); |
|
31 |
this.store.on('load', this.onLoad, this); |
|
32 |
this.store.on('loadexception', this.onLoad, this); |
|
33 |
this.removeMask = Ext.value(this.removeMask, false); |
|
34 |
}else{ |
|
35 |
var um = this.el.getUpdater(); |
|
36 |
um.showLoadIndicator = false; // disable the default indicator |
|
37 |
um.on('beforeupdate', this.onBeforeLoad, this); |
|
38 |
um.on('update', this.onLoad, this); |
|
39 |
um.on('failure', this.onLoad, this); |
|
40 |
this.removeMask = Ext.value(this.removeMask, true); |
|
41 |
}
|
|
42 |
};
|
|
43 |
||
44 |
Ext.LoadMask.prototype = { |
|
45 |
/**
|
|
46 |
* @cfg {Ext.data.Store} store
|
|
47 |
* Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
|
|
48 |
* hidden on either load sucess, or load fail.
|
|
49 |
*/
|
|
50 |
/**
|
|
51 |
* @cfg {Boolean} removeMask
|
|
52 |
* True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
|
|
53 |
* False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
|
|
54 |
*/
|
|
55 |
/**
|
|
56 |
* @cfg {String} msg
|
|
57 |
* The text to display in a centered loading message box (defaults to 'Loading...')
|
|
58 |
*/
|
|
59 |
msg : 'Loading...', |
|
60 |
/**
|
|
61 |
* @cfg {String} msgCls
|
|
62 |
* The CSS class to apply to the loading message element (defaults to "x-mask-loading")
|
|
63 |
*/
|
|
64 |
msgCls : 'x-mask-loading', |
|
65 |
||
66 |
/**
|
|
67 |
* Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
|
|
68 |
* @type Boolean
|
|
69 |
*/
|
|
70 |
disabled: false, |
|
71 |
||
72 |
/**
|
|
73 |
* Disables the mask to prevent it from being displayed
|
|
74 |
*/
|
|
75 |
disable : function(){ |
|
76 |
this.disabled = true; |
|
77 |
},
|
|
78 |
||
79 |
/**
|
|
80 |
* Enables the mask so that it can be displayed
|
|
81 |
*/
|
|
82 |
enable : function(){ |
|
83 |
this.disabled = false; |
|
84 |
},
|
|
85 |
||
86 |
// private
|
|
87 |
onLoad : function(){ |
|
88 |
this.el.unmask(this.removeMask); |
|
89 |
},
|
|
90 |
||
91 |
// private
|
|
92 |
onBeforeLoad : function(){ |
|
93 |
if(!this.disabled){ |
|
94 |
this.el.mask(this.msg, this.msgCls); |
|
95 |
}
|
|
96 |
},
|
|
97 |
||
98 |
/**
|
|
99 |
* Show this LoadMask over the configured Element.
|
|
100 |
*/
|
|
101 |
show: function(){ |
|
102 |
this.onBeforeLoad(); |
|
103 |
},
|
|
104 |
||
105 |
/**
|
|
106 |
* Hide this LoadMask.
|
|
107 |
*/
|
|
108 |
hide: function(){ |
|
109 |
this.onLoad(); |
|
110 |
},
|
|
111 |
||
112 |
// private
|
|
113 |
destroy : function(){ |
|
114 |
if(this.store){ |
|
115 |
this.store.un('beforeload', this.onBeforeLoad, this); |
|
116 |
this.store.un('load', this.onLoad, this); |
|
117 |
this.store.un('loadexception', this.onLoad, this); |
|
118 |
}else{ |
|
119 |
var um = this.el.getUpdater(); |
|
120 |
um.un('beforeupdate', this.onBeforeLoad, this); |
|
121 |
um.un('update', this.onLoad, this); |
|
122 |
um.un('failure', this.onLoad, this); |
|
123 |
}
|
|
124 |
}
|
|
125 |
};
|