docs/source/LoadMask.html

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