LoadMask.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

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