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