docs/source/LoadMask.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.LoadMask"></div>/**
  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({
  31             scope: this,
  32             beforeload: this.onBeforeLoad,
  33             load: this.onLoad,
  34             exception: this.onLoad
  35         });
  36         this.removeMask = Ext.value(this.removeMask, false);
  37     }else{
  38         var um = this.el.getUpdater();
  39         um.showLoadIndicator = false; // disable the default indicator
  40         um.on({
  41             scope: this,
  42             beforeupdate: this.onBeforeLoad,
  43             update: this.onLoad,
  44             failure: this.onLoad
  45         });
  46         this.removeMask = Ext.value(this.removeMask, true);
  47     }
  48 };
  49
  50 Ext.LoadMask.prototype = {
  51     <div id="cfg-Ext.LoadMask-store"></div>/**
  52      * @cfg {Ext.data.Store} store
  53      * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
  54      * hidden on either load sucess, or load fail.
  55      */
  56     <div id="cfg-Ext.LoadMask-removeMask"></div>/**
  57      * @cfg {Boolean} removeMask
  58      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
  59      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
  60      */
  61     <div id="cfg-Ext.LoadMask-msg"></div>/**
  62      * @cfg {String} msg
  63      * The text to display in a centered loading message box (defaults to 'Loading...')
  64      */
  65     msg : 'Loading...',
  66     <div id="cfg-Ext.LoadMask-msgCls"></div>/**
  67      * @cfg {String} msgCls
  68      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
  69      */
  70     msgCls : 'x-mask-loading',
  71
  72     <div id="prop-Ext.LoadMask-disabled"></div>/**
  73      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
  74      * @type Boolean
  75      */
  76     disabled: false,
  77
  78     <div id="method-Ext.LoadMask-disable"></div>/**
  79      * Disables the mask to prevent it from being displayed
  80      */
  81     disable : function(){
  82        this.disabled = true;
  83     },
  84
  85     <div id="method-Ext.LoadMask-enable"></div>/**
  86      * Enables the mask so that it can be displayed
  87      */
  88     enable : function(){
  89         this.disabled = false;
  90     },
  91
  92     // private
  93     onLoad : function(){
  94         this.el.unmask(this.removeMask);
  95     },
  96
  97     // private
  98     onBeforeLoad : function(){
  99         if(!this.disabled){
 100             this.el.mask(this.msg, this.msgCls);
 101         }
 102     },
 103
 104     <div id="method-Ext.LoadMask-show"></div>/**
 105      * Show this LoadMask over the configured Element.
 106      */
 107     show: function(){
 108         this.onBeforeLoad();
 109     },
 110
 111     <div id="method-Ext.LoadMask-hide"></div>/**
 112      * Hide this LoadMask.
 113      */
 114     hide: function(){
 115         this.onLoad();
 116     },
 117
 118     // private
 119     destroy : function(){
 120         if(this.store){
 121             this.store.un('beforeload', this.onBeforeLoad, this);
 122             this.store.un('load', this.onLoad, this);
 123             this.store.un('exception', this.onLoad, this);
 124         }else{
 125             var um = this.el.getUpdater();
 126             um.un('beforeupdate', this.onBeforeLoad, this);
 127             um.un('update', this.onLoad, this);
 128             um.un('failure', this.onLoad, this);
 129         }
 130     }
 131 };</pre>    \r
 132 </body>\r
 133 </html>