docs/source/LoadMask.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-LoadMask'>/**
  19 </span> * @class Ext.LoadMask
  20  * A simple utility class for generically masking elements while loading data.  If the {@link #store}
  21  * config option is specified, the masking will be automatically synchronized with the store's loading
  22  * process and the mask element will be cached for reuse.
  23  * &lt;p&gt;Example usage:&lt;/p&gt;
  24  * &lt;pre&gt;&lt;code&gt;
  25 // Basic mask:
  26 var myMask = new Ext.LoadMask(Ext.getBody(), {msg:&quot;Please wait...&quot;});
  27 myMask.show();
  28 &lt;/code&gt;&lt;/pre&gt;
  29
  30  */
  31
  32 Ext.define('Ext.LoadMask', {
  33
  34     /* Begin Definitions */
  35
  36     mixins: {
  37         observable: 'Ext.util.Observable'
  38     },
  39
  40     requires: ['Ext.data.StoreManager'],
  41
  42     /* End Definitions */
  43
  44 <span id='Ext-LoadMask-cfg-store'>    /**
  45 </span>     * @cfg {Ext.data.Store} store
  46      * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
  47      * hidden on either load success, or load fail.
  48      */
  49
  50 <span id='Ext-LoadMask-cfg-msg'>    /**
  51 </span>     * @cfg {String} msg
  52      * The text to display in a centered loading message box (defaults to 'Loading...')
  53      */
  54     msg : 'Loading...',
  55 <span id='Ext-LoadMask-cfg-msgCls'>    /**
  56 </span>     * @cfg {String} msgCls
  57      * The CSS class to apply to the loading message element (defaults to &quot;x-mask-loading&quot;)
  58      */
  59     msgCls : Ext.baseCSSPrefix + 'mask-loading',
  60
  61 <span id='Ext-LoadMask-cfg-useMsg'>    /**
  62 </span>     * @cfg {Boolean} useMsg
  63      * Whether or not to use a loading message class or simply mask the bound element.
  64      */
  65     useMsg: true,
  66
  67 <span id='Ext-LoadMask-property-disabled'>    /**
  68 </span>     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
  69      * @type Boolean
  70      */
  71     disabled: false,
  72
  73 <span id='Ext-LoadMask-method-constructor'>    /**
  74 </span>     * Creates new LoadMask.
  75      * @param {Mixed} el The element, element ID, or DOM node you wish to mask.
  76      * Also, may be a Component who's element you wish to mask.
  77      * @param {Object} config (optional) The config object
  78      */
  79     constructor : function(el, config) {
  80         var me = this;
  81
  82         if (el.isComponent) {
  83             me.bindComponent(el);
  84         } else {
  85             me.el = Ext.get(el);
  86         }
  87         Ext.apply(me, config);
  88
  89         me.addEvents('beforeshow', 'show', 'hide');
  90         if (me.store) {
  91             me.bindStore(me.store, true);
  92         }
  93         me.mixins.observable.constructor.call(me, config);
  94     },
  95
  96     bindComponent: function(comp) {
  97         var me = this,
  98             listeners = {
  99                 resize: me.onComponentResize,
 100                 scope: me
 101             };
 102
 103         if (comp.el) {
 104             me.onComponentRender(comp);
 105         } else {
 106             listeners.render = {
 107                 fn: me.onComponentRender,
 108                 scope: me,
 109                 single: true
 110             };
 111         }
 112         me.mon(comp, listeners);
 113     },
 114
 115 <span id='Ext-LoadMask-method-onComponentRender'>    /**
 116 </span>     * @private
 117      * Called if we were configured with a Component, and that Component was not yet rendered. Collects the element to mask.
 118      */
 119     onComponentRender: function(comp) {
 120         this.el = comp.getContentTarget();
 121     },
 122
 123 <span id='Ext-LoadMask-method-onComponentResize'>    /**
 124 </span>     * @private
 125      * Called when this LoadMask's Component is resized. The isMasked method also re-centers any displayed message.
 126      */
 127     onComponentResize: function(comp, w, h) {
 128         this.el.isMasked();
 129     },
 130
 131 <span id='Ext-LoadMask-method-bindStore'>    /**
 132 </span>     * Changes the data store bound to this LoadMask.
 133      * @param {Store} store The store to bind to this LoadMask
 134      */
 135     bindStore : function(store, initial) {
 136         var me = this;
 137
 138         if (!initial &amp;&amp; me.store) {
 139             me.mun(me.store, {
 140                 scope: me,
 141                 beforeload: me.onBeforeLoad,
 142                 load: me.onLoad,
 143                 exception: me.onLoad
 144             });
 145             if(!store) {
 146                 me.store = null;
 147             }
 148         }
 149         if (store) {
 150             store = Ext.data.StoreManager.lookup(store);
 151             me.mon(store, {
 152                 scope: me,
 153                 beforeload: me.onBeforeLoad,
 154                 load: me.onLoad,
 155                 exception: me.onLoad
 156             });
 157
 158         }
 159         me.store = store;
 160         if (store &amp;&amp; store.isLoading()) {
 161             me.onBeforeLoad();
 162         }
 163     },
 164
 165 <span id='Ext-LoadMask-method-disable'>    /**
 166 </span>     * Disables the mask to prevent it from being displayed
 167      */
 168     disable : function() {
 169         var me = this;
 170
 171        me.disabled = true;
 172        if (me.loading) {
 173            me.onLoad();
 174        }
 175     },
 176
 177 <span id='Ext-LoadMask-method-enable'>    /**
 178 </span>     * Enables the mask so that it can be displayed
 179      */
 180     enable : function() {
 181         this.disabled = false;
 182     },
 183
 184 <span id='Ext-LoadMask-method-isDisabled'>    /**
 185 </span>     * Method to determine whether this LoadMask is currently disabled.
 186      * @return {Boolean} the disabled state of this LoadMask.
 187      */
 188     isDisabled : function() {
 189         return this.disabled;
 190     },
 191
 192     // private
 193     onLoad : function() {
 194         var me = this;
 195
 196         me.loading = false;
 197         me.el.unmask();
 198         me.fireEvent('hide', me, me.el, me.store);
 199     },
 200
 201     // private
 202     onBeforeLoad : function() {
 203         var me = this;
 204
 205         if (!me.disabled &amp;&amp; !me.loading &amp;&amp; me.fireEvent('beforeshow', me, me.el, me.store) !== false) {
 206             if (me.useMsg) {
 207                 me.el.mask(me.msg, me.msgCls, false);
 208             } else {
 209                 me.el.mask();
 210             }
 211
 212             me.fireEvent('show', me, me.el, me.store);
 213             me.loading = true;
 214         }
 215     },
 216
 217 <span id='Ext-LoadMask-method-show'>    /**
 218 </span>     * Show this LoadMask over the configured Element.
 219      */
 220     show: function() {
 221         this.onBeforeLoad();
 222     },
 223
 224 <span id='Ext-LoadMask-method-hide'>    /**
 225 </span>     * Hide this LoadMask.
 226      */
 227     hide: function() {
 228         this.onLoad();
 229     },
 230
 231     // private
 232     destroy : function() {
 233         this.hide();
 234         this.clearListeners();
 235     }
 236 });
 237 </pre>
 238 </body>
 239 </html>