/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* A modal, floating Component which may be shown above a specified {@link Ext.Component Component} while loading data.
|
* When shown, the configured owning Component will be covered with a modality mask, and the LoadMask's {@link #msg} will be
|
* displayed centered, accompanied by a spinner image.
|
*
|
* If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
|
* the Store's loading process.
|
*
|
* 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.
|
*
|
* Example usage:
|
*
|
* // Basic mask:
|
* var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});
|
* myMask.show();
|
*/
|
Ext.define('Ext.LoadMask', {
|
|
extend: 'Ext.Component',
|
|
alias: 'widget.loadmask',
|
|
/* Begin Definitions */
|
|
mixins: {
|
floating: 'Ext.util.Floating',
|
bindable: 'Ext.util.Bindable'
|
},
|
|
uses: ['Ext.data.StoreManager'],
|
|
/* End Definitions */
|
|
/**
|
* @cfg {Ext.Component} target The Component you wish to mask. The the mask will be automatically sized
|
* upon Component resize, and the message box will be kept centered.
|
*/
|
|
/**
|
* @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 success, or load fail.
|
*/
|
|
//<locale>
|
/**
|
* @cfg {String} [msg="Loading..."]
|
* The text to display in a centered loading message box.
|
*/
|
msg : 'Loading...',
|
//</locale>
|
|
/**
|
* @cfg {String} [msgCls="x-mask-loading"]
|
* The CSS class to apply to the loading message element.
|
*/
|
msgCls : Ext.baseCSSPrefix + 'mask-loading',
|
|
/**
|
* @cfg {String} [maskCls="x-mask"]
|
* The CSS class to apply to the mask element
|
*/
|
maskCls: Ext.baseCSSPrefix + 'mask',
|
|
/**
|
* @cfg {Boolean} [useMsg=true]
|
* Whether or not to use a loading message class or simply mask the bound element.
|
*/
|
useMsg: true,
|
|
/**
|
* @cfg {Boolean} [useTargetEl=false]
|
* True to mask the {@link Ext.Component#getTargetEl targetEl} of the bound Component. By default,
|
* the {@link Ext.Component#getEl el} will be masked.
|
*/
|
useTargetEl: false,
|
|
baseCls: Ext.baseCSSPrefix + 'mask-msg',
|
|
childEls: [
|
'msgEl',
|
'msgTextEl'
|
],
|
|
renderTpl: [
|
'<div id="{id}-msgEl" class="{[values.$comp.msgCls]} ',
|
Ext.baseCSSPrefix, 'mask-msg-inner{childElCls}">',
|
'<div id="{id}-msgTextEl" class="', Ext.baseCSSPrefix ,'mask-msg-text',
|
'{childElCls}"></div>',
|
'</div>'
|
],
|
|
// @private Obviously, it's floating.
|
floating: {
|
shadow: 'frame'
|
},
|
|
// @private Masks are not focusable
|
focusOnToFront: false,
|
|
// When we put the load mask to the front of it's owner, we generally don't want to also bring the owning
|
// component to the front.
|
bringParentToFront: false,
|
|
/**
|
* Creates new LoadMask.
|
* @param {Object} [config] The config object.
|
*/
|
constructor : function(config) {
|
var me = this,
|
comp;
|
|
if (arguments.length === 2) {
|
//<debug>
|
if (Ext.isDefined(Ext.global.console)) {
|
Ext.global.console.warn('Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config');
|
}
|
//</debug>
|
comp = config;
|
config = arguments[1];
|
} else {
|
comp = config.target;
|
}
|
|
// Element support to be deprecated
|
if (!comp.isComponent) {
|
//<debug>
|
if (Ext.isDefined(Ext.global.console)) {
|
Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
|
}
|
//</debug>
|
comp = Ext.get(comp);
|
this.isElement = true;
|
}
|
|
me.ownerCt = comp;
|
if (!this.isElement) {
|
me.bindComponent(comp);
|
}
|
me.callParent([config]);
|
|
if (me.store) {
|
me.bindStore(me.store, true);
|
}
|
},
|
|
bindComponent: function(comp) {
|
var me = this,
|
listeners = {
|
scope: this,
|
resize: me.sizeMask,
|
added: me.onComponentAdded,
|
removed: me.onComponentRemoved
|
};
|
|
if (comp.floating) {
|
listeners.move = me.sizeMask;
|
me.activeOwner = comp;
|
} else if (comp.ownerCt) {
|
me.onComponentAdded(comp.ownerCt);
|
} else {
|
// if the target comp is non-floating and under a floating comp don't bring the load mask to the front of the stack
|
me.preventBringToFront = true;
|
}
|
|
me.mon(comp, listeners);
|
|
// subscribe to the observer that manages the hierarchy
|
me.mon(me.hierarchyEventSource, {
|
show: me.onContainerShow,
|
hide: me.onContainerHide,
|
expand: me.onContainerExpand,
|
collapse: me.onContainerCollapse,
|
scope: me
|
});
|
},
|
|
onComponentAdded: function(owner) {
|
var me = this;
|
delete me.activeOwner;
|
me.floatParent = owner;
|
if (!owner.floating) {
|
owner = owner.up('[floating]');
|
}
|
if (owner) {
|
me.activeOwner = owner;
|
me.mon(owner, 'move', me.sizeMask, me);
|
} else {
|
me.preventBringToFront = true;
|
}
|
owner = me.floatParent.ownerCt;
|
if (me.rendered && me.isVisible() && owner) {
|
me.floatOwner = owner;
|
me.mon(owner, 'afterlayout', me.sizeMask, me, {single: true});
|
}
|
},
|
|
onComponentRemoved: function(owner) {
|
var me = this,
|
activeOwner = me.activeOwner,
|
floatOwner = me.floatOwner;
|
|
if (activeOwner) {
|
me.mun(activeOwner, 'move', me.sizeMask, me);
|
}
|
if (floatOwner) {
|
me.mun(floatOwner, 'afterlayout', me.sizeMask, me);
|
}
|
delete me.activeOwner;
|
delete me.floatOwner;
|
},
|
|
afterRender: function() {
|
this.callParent(arguments);
|
this.container = this.floatParent.getContentTarget();
|
},
|
|
onContainerShow: function(container) {
|
if (this.isActiveContainer(container)) {
|
this.onComponentShow();
|
}
|
},
|
|
onContainerHide: function(container) {
|
if (this.isActiveContainer(container)) {
|
this.onComponentHide();
|
}
|
},
|
|
onContainerExpand: function(container) {
|
if (this.isActiveContainer(container)) {
|
this.onComponentShow();
|
}
|
},
|
|
onContainerCollapse: function(container) {
|
if (this.isActiveContainer(container)) {
|
this.onComponentHide();
|
}
|
},
|
|
isActiveContainer: function(container) {
|
return this.isDescendantOf(container);
|
},
|
|
onComponentHide: function() {
|
var me = this;
|
|
if (me.rendered && me.isVisible()) {
|
me.hide();
|
me.showNext = true;
|
}
|
},
|
|
onComponentShow: function() {
|
if (this.showNext) {
|
this.show();
|
}
|
delete this.showNext;
|
},
|
|
/**
|
* @private
|
* Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.
|
*/
|
sizeMask: function() {
|
var me = this,
|
target;
|
|
if (me.rendered && me.isVisible()) {
|
me.center();
|
|
target = me.getMaskTarget();
|
me.getMaskEl().show().setSize(target.getSize()).alignTo(target, 'tl-tl');
|
|
}
|
},
|
|
/**
|
* Changes the data store bound to this LoadMask.
|
* @param {Ext.data.Store} store The store to bind to this LoadMask
|
*/
|
bindStore : function(store, initial) {
|
var me = this;
|
me.mixins.bindable.bindStore.apply(me, arguments);
|
store = me.store;
|
if (store && store.isLoading()) {
|
me.onBeforeLoad();
|
}
|
},
|
|
getStoreListeners: function(store) {
|
var load = this.onLoad,
|
beforeLoad = this.onBeforeLoad,
|
result = {
|
// Fired when a range is requested for rendering that is not in the cache
|
cachemiss: beforeLoad,
|
|
// Fired when a range for rendering which was previously missing from the cache is loaded
|
cachefilled: load
|
};
|
|
// Only need to mask on load if the proxy is asynchronous - ie: Ajax/JsonP
|
if (!store.proxy.isSynchronous) {
|
result.beforeLoad = beforeLoad;
|
result.load = load;
|
}
|
return result;
|
},
|
|
onDisable : function() {
|
this.callParent(arguments);
|
if (this.loading) {
|
this.onLoad();
|
}
|
},
|
|
getOwner: function() {
|
return this.ownerCt || this.floatParent;
|
},
|
|
getMaskTarget: function() {
|
var owner = this.getOwner();
|
return this.useTargetEl ? owner.getTargetEl() : owner.getEl();
|
},
|
|
// @private
|
onBeforeLoad : function() {
|
var me = this,
|
owner = me.getOwner(),
|
origin;
|
|
if (!me.disabled) {
|
me.loading = true;
|
// 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) {
|
me.maybeShow();
|
} else {
|
// The code below is a 'run-once' interceptor.
|
origin = owner.afterComponentLayout;
|
owner.afterComponentLayout = function() {
|
owner.afterComponentLayout = origin;
|
origin.apply(owner, arguments);
|
me.maybeShow();
|
};
|
}
|
}
|
},
|
|
maybeShow: function() {
|
var me = this,
|
owner = me.getOwner();
|
|
if (!owner.isVisible(true)) {
|
me.showNext = true;
|
}
|
else if (me.loading && owner.rendered) {
|
me.show();
|
}
|
},
|
|
getMaskEl: function(){
|
var me = this;
|
return me.maskEl || (me.maskEl = me.el.insertSibling({
|
cls: me.maskCls,
|
style: {
|
zIndex: me.el.getStyle('zIndex') - 2
|
}
|
}, 'before'));
|
},
|
|
onShow: function() {
|
var me = this,
|
msgEl = me.msgEl;
|
|
me.callParent(arguments);
|
me.loading = true;
|
|
if (me.useMsg) {
|
msgEl.show();
|
me.msgTextEl.update(me.msg);
|
} else {
|
msgEl.parent().hide();
|
}
|
},
|
|
hide: function() {
|
// Element support to be deprecated
|
if (this.isElement) {
|
this.ownerCt.unmask();
|
this.fireEvent('hide', this);
|
return;
|
}
|
delete this.showNext;
|
return this.callParent(arguments);
|
},
|
|
onHide: function() {
|
this.callParent();
|
this.getMaskEl().hide();
|
},
|
|
show: function() {
|
// Element support to be deprecated
|
if (this.isElement) {
|
this.ownerCt.mask(this.useMsg ? this.msg : '', this.msgCls);
|
this.fireEvent('show', this);
|
return;
|
}
|
return this.callParent(arguments);
|
},
|
|
afterShow: function() {
|
this.callParent(arguments);
|
this.sizeMask();
|
},
|
|
setZIndex: function(index) {
|
var me = this,
|
owner = me.activeOwner;
|
|
if (owner) {
|
// it seems silly to add 1 to have it subtracted in the call below,
|
// but this allows the x-mask el to have the correct z-index (same as the component)
|
// so instead of directly changing the zIndexStack just get the z-index of the owner comp
|
index = parseInt(owner.el.getStyle('zIndex'), 10) + 1;
|
}
|
|
me.getMaskEl().setStyle('zIndex', index - 1);
|
return me.mixins.floating.setZIndex.apply(me, arguments);
|
},
|
|
// @private
|
onLoad : function() {
|
this.loading = false;
|
this.hide();
|
},
|
|
onDestroy: function() {
|
var me = this;
|
|
if (me.isElement) {
|
me.ownerCt.unmask();
|
}
|
|
Ext.destroy(me.maskEl);
|
me.callParent();
|
}
|
});
|
