93 lines
No EOL
3.8 KiB
HTML
93 lines
No EOL
3.8 KiB
HTML
<html><head><title>LoadMask.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>LoadMask.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.LoadMask
|
|
* A simple utility class <b>for</b> generically masking elements <b>while</b> loading data. If the element being masked has
|
|
* an underlying {@link Ext.data.Store}, the masking will be automatically synchronized <b>with</b> the store's loading
|
|
* process and the mask element will be cached <b>for</b> reuse. For all other elements, <b>this</b> mask will replace the
|
|
* element's UpdateManager load indicator and will be destroyed after the initial load.
|
|
* @constructor
|
|
* Create a <b>new</b> LoadMask
|
|
* @param {Object} config The config object
|
|
*/</i>
|
|
Ext.LoadMask = <b>function</b>(el, config){
|
|
<b>this</b>.el = Ext.get(el);
|
|
Ext.apply(<b>this</b>, config);
|
|
<b>if</b>(this.store){
|
|
<b>this</b>.store.on('beforeload', <b>this</b>.onBeforeLoad, <b>this</b>);
|
|
<b>this</b>.store.on('load', <b>this</b>.onLoad, <b>this</b>);
|
|
<b>this</b>.store.on('loadexception', <b>this</b>.onLoad, <b>this</b>);
|
|
<b>this</b>.removeMask = false;
|
|
}<b>else</b>{
|
|
<b>var</b> um = <b>this</b>.el.getUpdateManager();
|
|
um.showLoadIndicator = false; <i>// disable the <b>default</b> indicator</i>
|
|
um.on('beforeupdate', <b>this</b>.onBeforeLoad, <b>this</b>);
|
|
um.on('update', <b>this</b>.onLoad, <b>this</b>);
|
|
um.on('failure', <b>this</b>.onLoad, <b>this</b>);
|
|
<b>this</b>.removeMask = true;
|
|
}
|
|
};
|
|
|
|
Ext.LoadMask.prototype = {
|
|
<i>/**
|
|
* @cfg {Boolean} removeMask
|
|
* True to create a single-use mask that is automatically destroyed after loading (useful <b>for</b> page loads),
|
|
* False to persist the mask element reference <b>for</b> multiple uses (e.g., <b>for</b> paged data widgets). Defaults to false.
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String} msg
|
|
* The text to display <b>in</b> a centered loading message box (defaults to 'Loading...')
|
|
*/</i>
|
|
msg : 'Loading...',
|
|
<i>/**
|
|
* @cfg {String} msgCls
|
|
* The CSS class to apply to the loading message element (defaults to "x-mask-loading")
|
|
*/</i>
|
|
msgCls : 'x-mask-loading',
|
|
|
|
<i>/**
|
|
* Read-only. True <b>if</b> the mask is currently disabled so that it will not be displayed (defaults to false)
|
|
* @type Boolean
|
|
*/</i>
|
|
disabled: false,
|
|
|
|
<i>/**
|
|
* Disables the mask to prevent it from being displayed
|
|
*/</i>
|
|
disable : <b>function</b>(){
|
|
<b>this</b>.disabled = true;
|
|
},
|
|
|
|
<i>/**
|
|
* Enables the mask so that it can be displayed
|
|
*/</i>
|
|
enable : <b>function</b>(){
|
|
<b>this</b>.disabled = false;
|
|
},
|
|
|
|
<i>// private</i>
|
|
onLoad : <b>function</b>(){
|
|
<b>this</b>.el.unmask(<b>this</b>.removeMask);
|
|
},
|
|
|
|
<i>// private</i>
|
|
onBeforeLoad : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.disabled){
|
|
<b>this</b>.el.mask(<b>this</b>.msg, <b>this</b>.msgCls);
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
destroy : <b>function</b>(){
|
|
<b>if</b>(this.store){
|
|
<b>this</b>.store.un('beforeload', <b>this</b>.onBeforeLoad, <b>this</b>);
|
|
<b>this</b>.store.un('load', <b>this</b>.onLoad, <b>this</b>);
|
|
<b>this</b>.store.un('loadexception', <b>this</b>.onLoad, <b>this</b>);
|
|
}<b>else</b>{
|
|
<b>var</b> um = <b>this</b>.el.getUpdateManager();
|
|
um.un('beforeupdate', <b>this</b>.onBeforeLoad, <b>this</b>);
|
|
um.un('update', <b>this</b>.onLoad, <b>this</b>);
|
|
um.un('failure', <b>this</b>.onLoad, <b>this</b>);
|
|
}
|
|
}
|
|
};</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |