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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.LoadMask"></div>/**
* @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({
scope: this,
beforeload: this.onBeforeLoad,
load: this.onLoad,
exception: this.onLoad
});
this.removeMask = Ext.value(this.removeMask, false);
}else{
var um = this.el.getUpdater();
um.showLoadIndicator = false; // disable the default indicator
um.on({
scope: this,
beforeupdate: this.onBeforeLoad,
update: this.onLoad,
failure: this.onLoad
});
this.removeMask = Ext.value(this.removeMask, true);
}
};
Ext.LoadMask.prototype = {
<div id="cfg-Ext.LoadMask-store"></div>/**
* @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.
*/
<div id="cfg-Ext.LoadMask-removeMask"></div>/**
* @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.
*/
<div id="cfg-Ext.LoadMask-msg"></div>/**
* @cfg {String} msg
* The text to display in a centered loading message box (defaults to 'Loading...')
*/
msg : 'Loading...',
<div id="cfg-Ext.LoadMask-msgCls"></div>/**
* @cfg {String} msgCls
* The CSS class to apply to the loading message element (defaults to "x-mask-loading")
*/
msgCls : 'x-mask-loading',
<div id="prop-Ext.LoadMask-disabled"></div>/**
* Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
* @type Boolean
*/
disabled: false,
<div id="method-Ext.LoadMask-disable"></div>/**
* Disables the mask to prevent it from being displayed
*/
disable : function(){
this.disabled = true;
},
<div id="method-Ext.LoadMask-enable"></div>/**
* 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);
}
},
<div id="method-Ext.LoadMask-show"></div>/**
* Show this LoadMask over the configured Element.
*/
show: function(){
this.onBeforeLoad();
},
<div id="method-Ext.LoadMask-hide"></div>/**
* 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('exception', 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);
}
}
};</pre>
</body>
</html>
|
