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-method-constructor'><span id='Ext-LoadMask'>/**
  19 </span></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  * @constructor
  31  * Create a new LoadMask
  32  * @param {Mixed} el The element, element ID, or DOM node you wish to mask. Also, may be a Component who's element you wish to mask.
  33  * @param {Object} config The config object
  34  */
  35
  36 Ext.define('Ext.LoadMask', {
  37
  38     /* Begin Definitions */
  39
  40     mixins: {
  41         observable: 'Ext.util.Observable'
  42     },
  43
  44     requires: ['Ext.data.StoreManager'],
  45
  46     /* End Definitions */
  47
  48 <span id='Ext-LoadMask-cfg-store'>    /**
  49 </span>     * @cfg {Ext.data.Store} store
  50      * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
  51      * hidden on either load success, or load fail.
  52      */
  53
  54 <span id='Ext-LoadMask-cfg-msg'>    /**
  55 </span>     * @cfg {String} msg
  56      * The text to display in a centered loading message box (defaults to 'Loading...')
  57      */
  58     msg : 'Loading...',
  59 <span id='Ext-LoadMask-cfg-msgCls'>    /**
  60 </span>     * @cfg {String} msgCls
  61      * The CSS class to apply to the loading message element (defaults to &quot;x-mask-loading&quot;)
  62      */
  63     msgCls : Ext.baseCSSPrefix + 'mask-loading',
  64
  65 <span id='Ext-LoadMask-cfg-useMsg'>    /**
  66 </span>     * @cfg {Boolean} useMsg
  67      * Whether or not to use a loading message class or simply mask the bound element.
  68      */
  69     useMsg: true,
  70
  71 <span id='Ext-LoadMask-property-disabled'>    /**
  72 </span>     * 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     constructor : function(el, config) {
  78         var me = this;
  79
  80         if (el.isComponent) {
  81             me.bindComponent(el);
  82         } else {
  83             me.el = Ext.get(el);
  84         }
  85         Ext.apply(me, config);
  86
  87         me.addEvents('beforeshow', 'show', 'hide');
  88         if (me.store) {
  89             me.bindStore(me.store, true);
  90         }
  91         me.mixins.observable.constructor.call(me, config);
  92     },
  93
  94     bindComponent: function(comp) {
  95         var me = this,
  96             listeners = {
  97                 resize: me.onComponentResize,
  98                 scope: me
  99             };
 100
 101         if (comp.el) {
 102             me.onComponentRender(comp);
 103         } else {
 104             listeners.render = {
 105                 fn: me.onComponentRender,
 106                 scope: me,
 107                 single: true
 108             };
 109         }
 110         me.mon(comp, listeners);
 111     },
 112
 113 <span id='Ext-LoadMask-method-onComponentRender'>    /**
 114 </span>     * @private
 115      * Called if we were configured with a Component, and that Component was not yet rendered. Collects the element to mask.
 116      */
 117     onComponentRender: function(comp) {
 118         this.el = comp.getContentTarget();
 119     },
 120
 121 <span id='Ext-LoadMask-method-onComponentResize'>    /**
 122 </span>     * @private
 123      * Called when this LoadMask's Component is resized. The isMasked method also re-centers any displayed message.
 124      */
 125     onComponentResize: function(comp, w, h) {
 126         this.el.isMasked();
 127     },
 128
 129 <span id='Ext-LoadMask-method-bindStore'>    /**
 130 </span>     * Changes the data store bound to this LoadMask.
 131      * @param {Store} store The store to bind to this LoadMask
 132      */
 133     bindStore : function(store, initial) {
 134         var me = this;
 135
 136         if (!initial &amp;&amp; me.store) {
 137             me.mun(me.store, {
 138                 scope: me,
 139                 beforeload: me.onBeforeLoad,
 140                 load: me.onLoad,
 141                 exception: me.onLoad
 142             });
 143             if(!store) {
 144                 me.store = null;
 145             }
 146         }
 147         if (store) {
 148             store = Ext.data.StoreManager.lookup(store);
 149             me.mon(store, {
 150                 scope: me,
 151                 beforeload: me.onBeforeLoad,
 152                 load: me.onLoad,
 153                 exception: me.onLoad
 154             });
 155
 156         }
 157         me.store = store;
 158         if (store &amp;&amp; store.isLoading()) {
 159             me.onBeforeLoad();
 160         }
 161     },
 162
 163 <span id='Ext-LoadMask-method-disable'>    /**
 164 </span>     * Disables the mask to prevent it from being displayed
 165      */
 166     disable : function() {
 167         var me = this;
 168
 169        me.disabled = true;
 170        if (me.loading) {
 171            me.onLoad();
 172        }
 173     },
 174
 175 <span id='Ext-LoadMask-method-enable'>    /**
 176 </span>     * Enables the mask so that it can be displayed
 177      */
 178     enable : function() {
 179         this.disabled = false;
 180     },
 181
 182 <span id='Ext-LoadMask-method-isDisabled'>    /**
 183 </span>     * Method to determine whether this LoadMask is currently disabled.
 184      * @return {Boolean} the disabled state of this LoadMask.
 185      */
 186     isDisabled : function() {
 187         return this.disabled;
 188     },
 189
 190     // private
 191     onLoad : function() {
 192         var me = this;
 193
 194         me.loading = false;
 195         me.el.unmask();
 196         me.fireEvent('hide', me, me.el, me.store);
 197     },
 198
 199     // private
 200     onBeforeLoad : function() {
 201         var me = this;
 202
 203         if (!me.disabled &amp;&amp; !me.loading &amp;&amp; me.fireEvent('beforeshow', me, me.el, me.store) !== false) {
 204             if (me.useMsg) {
 205                 me.el.mask(me.msg, me.msgCls, false);
 206             } else {
 207                 me.el.mask();
 208             }
 209
 210             me.fireEvent('show', me, me.el, me.store);
 211             me.loading = true;
 212         }
 213     },
 214
 215 <span id='Ext-LoadMask-method-show'>    /**
 216 </span>     * Show this LoadMask over the configured Element.
 217      */
 218     show: function() {
 219         this.onBeforeLoad();
 220     },
 221
 222 <span id='Ext-LoadMask-method-hide'>    /**
 223 </span>     * Hide this LoadMask.
 224      */
 225     hide: function() {
 226         this.onLoad();
 227     },
 228
 229     // private
 230     destroy : function() {
 231         this.hide();
 232         this.clearListeners();
 233     }
 234 });
 235 </pre>
 236 </body>
 237 </html>