-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><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>
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <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>
+ <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>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-LoadMask'>/**
+</span> * @class Ext.LoadMask
+ * <p>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.</p>
+ * <p>If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
+ * the Store's loading process.</p>
+ * <p>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.</p>
+ * <p>Example usage:</p>
+ * <pre><code>
// Basic mask:
-var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
+var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
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
+</code></pre>
+
*/
-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
- * hidden on either load sucess, or load fail.
+ * hidden on either load success, 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.
- */
- <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...',
- <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="x-mask-loading"]
+ * The CSS class to apply to the loading message element.
+ */
+ 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.
*/
- msgCls : 'x-mask-loading',
+ 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,
- <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: '<div style="position:relative" class="{msgCls}"></div>',
+
+ // 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.
+ * <p>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.</p>
+ * @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 && 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 && 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 && store.isLoading()) {
+ me.onBeforeLoad();
+ }
+ },
+
+ onDisable : function() {
+ this.callParent(arguments);
+ if (this.loading) {
+ this.onLoad();
+ }
},
// 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> \r
-</body>\r
-</html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff