git.roojs.org Git - roojs1/blob - Roo/LoadMask.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.LoadMask
  14  * A simple utility class for generically masking elements while loading data.  If the element being masked has
  15  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
  16  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
  17  * element's UpdateManager load indicator and will be destroyed after the initial load.
  18  * @constructor
  19  * Create a new LoadMask
  20  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
  21  * @param {Object} config The config object
  22  */
  23 Roo.LoadMask = function(el, config){
  24     this.el = Roo.get(el);
  25     Roo.apply(this, config);
  26     if(this.store){
  27         this.store.on('beforeload', this.onBeforeLoad, this);
  28         this.store.on('load', this.onLoad, this);
  29         this.store.on('loadexception', this.onLoadException, this);
  30         this.removeMask = false;
  31     }else{
  32         var um = this.el.getUpdateManager();
  33         um.showLoadIndicator = false; // disable the default indicator
  34         um.on('beforeupdate', this.onBeforeLoad, this);
  35         um.on('update', this.onLoad, this);
  36         um.on('failure', this.onLoad, this);
  37         this.removeMask = true;
  38     }
  39 };
  40
  41 Roo.LoadMask.prototype = {
  42     /**
  43      * @cfg {Boolean} removeMask
  44      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
  45      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
  46      */
  47     removeMask : false,
  48     /**
  49      * @cfg {String} msg
  50      * The text to display in a centered loading message box (defaults to 'Loading...')
  51      */
  52     msg : 'Loading...',
  53     /**
  54      * @cfg {String} msgCls
  55      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
  56      */
  57     msgCls : 'x-mask-loading',
  58
  59     /**
  60      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
  61      * @type Boolean
  62      */
  63     disabled: false,
  64
  65     /**
  66      * Disables the mask to prevent it from being displayed
  67      */
  68     disable : function(){
  69        this.disabled = true;
  70     },
  71
  72     /**
  73      * Enables the mask so that it can be displayed
  74      */
  75     enable : function(){
  76         this.disabled = false;
  77     },
  78
  79     onLoadException : function()
  80     {
  81         Roo.log(arguments);
  82
  83         if (typeof(arguments[3]) != 'undefined') {
  84             Roo.MessageBox.alert("Error loading",arguments[3]);
  85         }
  86         /*
  87         try {
  88             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
  89                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
  90             }
  91         } catch(e) {
  92
  93         }
  94         */
  95
  96         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
  97     },
  98     // private
  99     onLoad : function()
 100     {
 101         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
 102     },
 103
 104     // private
 105     onBeforeLoad : function(){
 106         if(!this.disabled){
 107             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
 108         }
 109     },
 110
 111     // private
 112     destroy : function(){
 113         if(this.store){
 114             this.store.un('beforeload', this.onBeforeLoad, this);
 115             this.store.un('load', this.onLoad, this);
 116             this.store.un('loadexception', this.onLoadException, this);
 117         }else{
 118             var um = this.el.getUpdateManager();
 119             um.un('beforeupdate', this.onBeforeLoad, this);
 120             um.un('update', this.onLoad, this);
 121             um.un('failure', this.onLoad, this);
 122         }
 123     }
 124 };