git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / LoadMask.html
diff --git a/docs/source/LoadMask.html b/docs/source/LoadMask.html
index f3be36a..cc0840d 100644 (file)
--- a/docs/source/LoadMask.html
+++ b/docs/source/LoadMask.html
@@ -1,139 +1,254 @@
+<!DOCTYPE html>
 <html>
 <head>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.LoadMask"></div>/**
- * @class Ext.LoadMask
- * A simple utility class for generically masking elements while loading data.  If the {@link #store}
- * config option is specified, the masking will be automatically synchronized with the store's loading
- * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
- * element's Updater load indicator and will be destroyed after the initial load.
- * <p>Example usage:</p>
- *<pre><code>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-LoadMask'>/**
+</span> * @class Ext.LoadMask
+ * &lt;p&gt;A modal, floating Component which may be shown above a specified {@link Ext.core.Element Element}, or a specified
+ * {@link Ext.Component Component} while loading data. When shown, the configured owning Element or Component will
+ * be covered with a modality mask, and the LoadMask's {@link #msg} will be displayed centered, accompanied by a spinner image.&lt;/p&gt;
+ * &lt;p&gt;If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
+ * the Store's loading process.&lt;/p&gt;
+ * &lt;p&gt;Because this is a floating Component, its z-index will be managed by the global {@link Ext.WindowManager ZIndexManager}
+ * object, and upon show, it will place itsef at the top of the hierarchy.&lt;/p&gt;
+ * &lt;p&gt;Example usage:&lt;/p&gt;
+ * &lt;pre&gt;&lt;code&gt;
 // Basic mask:
 // Basic mask:
-var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
+var myMask = new Ext.LoadMask(Ext.getBody(), {msg:&quot;Please wait...&quot;});
 myMask.show();
 myMask.show();
-</code></pre>
- * @constructor
- * Create a new LoadMask
- * @param {Mixed} el The element or DOM node, or its id
- * @param {Object} config The config object
+&lt;/code&gt;&lt;/pre&gt;
+
  */
  */
-Ext.LoadMask = function(el, config){
-    this.el = Ext.get(el);
-    Ext.apply(this, config);
-    if(this.store){
-        this.store.on({
-            scope: this,
-            beforeload: this.onBeforeLoad,
-            load: this.onLoad,
-            exception: this.onLoad
-        });
-        this.removeMask = Ext.value(this.removeMask, false);
-    }else{
-        var um = this.el.getUpdater();
-        um.showLoadIndicator = false; // disable the default indicator
-        um.on({
-            scope: this,
-            beforeupdate: this.onBeforeLoad,
-            update: this.onLoad,
-            failure: this.onLoad
-        });
-        this.removeMask = Ext.value(this.removeMask, true);
-    }
-};
 
 
-Ext.LoadMask.prototype = {
-    <div id="cfg-Ext.LoadMask-store"></div>/**
-     * @cfg {Ext.data.Store} store
+Ext.define('Ext.LoadMask', {
+
+    extend: 'Ext.Component',
+
+    alias: 'widget.loadmask',
+
+    /* Begin Definitions */
+
+    mixins: {
+        floating: 'Ext.util.Floating'
+    },
+
+    uses: ['Ext.data.StoreManager'],
+
+    /* End Definitions */
+
+<span id='Ext-LoadMask-cfg-store'>    /**
+</span>     * @cfg {Ext.data.Store} store
      * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
      * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
-     * hidden on either load sucess, or load fail.
-     */
-    <div id="cfg-Ext.LoadMask-removeMask"></div>/**
-     * @cfg {Boolean} removeMask
-     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
-     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
+     * hidden on either load success, or load fail.
      */
      */
-    <div id="cfg-Ext.LoadMask-msg"></div>/**
-     * @cfg {String} msg
-     * The text to display in a centered loading message box (defaults to 'Loading...')
+
+<span id='Ext-LoadMask-cfg-msg'>    /**
+</span>     * @cfg {String} msg
+     * The text to display in a centered loading message box.
      */
     msg : 'Loading...',
      */
     msg : 'Loading...',
-    <div id="cfg-Ext.LoadMask-msgCls"></div>/**
-     * @cfg {String} msgCls
-     * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+<span id='Ext-LoadMask-cfg-msgCls'>    /**
+</span>     * @cfg {String} [msgCls=&quot;x-mask-loading&quot;]
+     * The CSS class to apply to the loading message element.
      */
      */
-    msgCls : 'x-mask-loading',
+    msgCls : Ext.baseCSSPrefix + 'mask-loading',
+    
+<span id='Ext-LoadMask-cfg-useMsg'>    /**
+</span>     * @cfg {Boolean} useMsg
+     * Whether or not to use a loading message class or simply mask the bound element.
+     */
+    useMsg: true,
 
 
-    <div id="prop-Ext.LoadMask-disabled"></div>/**
-     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+<span id='Ext-LoadMask-property-disabled'>    /**
+</span>     * Read-only. True if the mask is currently disabled so that it will not be displayed
      * @type Boolean
      */
     disabled: false,
 
      * @type Boolean
      */
     disabled: false,
 
-    <div id="method-Ext.LoadMask-disable"></div>/**
-     * Disables the mask to prevent it from being displayed
-     */
-    disable : function(){
-       this.disabled = true;
+    baseCls: Ext.baseCSSPrefix + 'mask-msg',
+
+    renderTpl: '&lt;div style=&quot;position:relative&quot; class=&quot;{msgCls}&quot;&gt;&lt;/div&gt;',
+
+    // Private. The whole point is that there's a mask.
+    modal: true,
+
+    // Private. Obviously, it's floating.
+    floating: {
+        shadow: 'frame'
     },
 
     },
 
-    <div id="method-Ext.LoadMask-enable"></div>/**
-     * Enables the mask so that it can be displayed
+    // Private. Masks are not focusable
+    focusOnToFront: false,
+
+<span id='Ext-LoadMask-method-constructor'>    /**
+</span>     * Creates new LoadMask.
+     * @param {String/HTMLElement/Ext.Element} el The element, element ID, or DOM node you wish to mask.
+     * &lt;p&gt;Also, may be a {@link Ext.Component Component} who's element you wish to mask. If a Component is specified, then
+     * the mask will be automatically sized upon Component resize, the message box will be kept centered,
+     * and the mask only be visible when the Component is.&lt;/p&gt;
+     * @param {Object} [config] The config object
      */
      */
-    enable : function(){
-        this.disabled = false;
+    constructor : function(el, config) {
+        var me = this;
+
+        // If a Component passed, bind to it.
+        if (el.isComponent) {
+            me.ownerCt = el;
+            me.bindComponent(el);
+        }
+        // Create a dumy Component encapsulating the specified Element
+        else {
+            me.ownerCt = new Ext.Component({
+                el: Ext.get(el),
+                rendered: true,
+                componentLayoutCounter: 1
+            });
+            me.container = el;
+        }
+        me.callParent([config]);
+
+        if (me.store) {
+            me.bindStore(me.store, true);
+        }
+        me.renderData = {
+            msgCls: me.msgCls
+        };
+        me.renderSelectors = {
+            msgEl: 'div'
+        };
     },
 
     },
 
-    // private
-    onLoad : function(){
-        this.el.unmask(this.removeMask);
+    bindComponent: function(comp) {
+        this.mon(comp, {
+            resize: this.onComponentResize,
+            scope: this
+        });
     },
 
     },
 
-    // private
-    onBeforeLoad : function(){
-        if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
-        }
+    afterRender: function() {
+        this.callParent(arguments);
+        this.container = this.floatParent.getContentTarget();
     },
 
     },
 
-    <div id="method-Ext.LoadMask-show"></div>/**
-     * Show this LoadMask over the configured Element.
+<span id='Ext-LoadMask-method-onComponentResize'>    /**
+</span>     * @private
+     * Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.
      */
      */
-    show: function(){
-        this.onBeforeLoad();
+    onComponentResize: function() {
+        var me = this;
+        if (me.rendered &amp;&amp; me.isVisible()) {
+            me.toFront();
+            me.center();
+        }
     },
 
     },
 
-    <div id="method-Ext.LoadMask-hide"></div>/**
-     * Hide this LoadMask.
+<span id='Ext-LoadMask-method-bindStore'>    /**
+</span>     * Changes the data store bound to this LoadMask.
+     * @param {Ext.data.Store} store The store to bind to this LoadMask
      */
      */
-    hide: function(){
-        this.onLoad();
+    bindStore : function(store, initial) {
+        var me = this;
+
+        if (!initial &amp;&amp; me.store) {
+            me.mun(me.store, {
+                scope: me,
+                beforeload: me.onBeforeLoad,
+                load: me.onLoad,
+                exception: me.onLoad
+            });
+            if (!store) {
+                me.store = null;
+            }
+        }
+        if (store) {
+            store = Ext.data.StoreManager.lookup(store);
+            me.mon(store, {
+                scope: me,
+                beforeload: me.onBeforeLoad,
+                load: me.onLoad,
+                exception: me.onLoad
+            });
+
+        }
+        me.store = store;
+        if (store &amp;&amp; store.isLoading()) {
+            me.onBeforeLoad();
+        }
+    },
+
+    onDisable : function() {
+        this.callParent(arguments);
+        if (this.loading) {
+            this.onLoad();
+        }
     },
 
     // private
     },
 
     // private
-    destroy : function(){
-        if(this.store){
-            this.store.un('beforeload', this.onBeforeLoad, this);
-            this.store.un('load', this.onLoad, this);
-            this.store.un('exception', this.onLoad, this);
-        }else{
-            var um = this.el.getUpdater();
-            um.un('beforeupdate', this.onBeforeLoad, this);
-            um.un('update', this.onLoad, this);
-            um.un('failure', this.onLoad, this);
+    onBeforeLoad : function() {
+        var me = this,
+            owner = me.ownerCt || me.floatParent,
+            origin;
+        if (!this.disabled) {
+            // If the owning Component has not been layed out, defer so that the ZIndexManager
+            // gets to read its layed out size when sizing the modal mask
+            if (owner.componentLayoutCounter) {
+                Ext.Component.prototype.show.call(me);
+            } else {
+                // The code below is a 'run-once' interceptor.
+                origin = owner.afterComponentLayout;
+                owner.afterComponentLayout = function() {
+                    owner.afterComponentLayout = origin;
+                    origin.apply(owner, arguments);
+                    if(me.loading) {
+                        Ext.Component.prototype.show.call(me);
+                    }
+                };
+            }
+        }
+    },
+
+    onHide: function(){
+        var me = this;
+        me.callParent(arguments);
+        me.showOnParentShow = true;
+    },
+
+    onShow: function() {
+        var me = this,
+            msgEl = me.msgEl;
+            
+        me.callParent(arguments);
+        me.loading = true;
+        if (me.useMsg) {
+            msgEl.show().update(me.msg);
+        } else {
+            msgEl.parent().hide();
         }
         }
+    },
+
+    afterShow: function() {
+        this.callParent(arguments);
+        this.center();
+    },
+
+    // private
+    onLoad : function() {
+        this.loading = false;
+        Ext.Component.prototype.hide.call(this);
     }
     }
-};</pre>    
+});</pre>
 </body>
 </body>
-</html>
\ No newline at end of file
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.