PDA

View Full Version : Question and/or bug about setLoading



wyz
7 Jan 2012, 5:10 AM
I've got two questions about the function 'setLoading' in AbstractComponent.

As you can see in the attachments, the loadingMask is on the complete form, without thinking of the z-order of the top bar and the tab-panel with it's content. I assume there is some setting to make sure that the loadingMask isn't going over something else, but I can't find it. Can anyone help me?

The question is about a Chrome related problem: the text on the mask is splitted in two lines, but I don't want this, nor did I say it should be splitted. Because of the splitting, there is also a empty piece of 'light blue' on the right hand side of the text. Is this fixable? A 'hack' is good enough.

Thanks in advance!

mitchellsimoens
7 Jan 2012, 6:26 AM
This look awful anyway. LoadMask has gotten many bug fixes and optimizations in the 4.1.0 beta 1 release.

wyz
7 Jan 2012, 7:48 AM
This look awful anyway. LoadMask has gotten many bug fixes and optimizations in the 4.1.0 beta 1 release.

Unfortunately that doesn't solve it. Do you have any other ideas?

wyz
10 Jan 2012, 10:18 AM
As we're going to release this within 3 weeks and I couldn't find any forum rules not permitting it, I'd like to bump this thread once to be sure there's no known solution.

BertM
21 Jan 2012, 3:29 PM
Good to see there are other people trying to investigate this :)

Meanwhile, this works fairly well (on ExtJS 4.0):

Ext.override(Ext.AbstractComponent, {
setLoading: function(load, targetEl)
{
var me = this,
msg;

if (me.rendered)
{
if (load !== false && !me.collapsed)
{
if (Ext.isObject(load))
{
throw "This implementation of setLoading does not support a config object.";
}
else if (Ext.isString(load))
{
msg = load;
}
else
{
msg = "Loading...";
}
if (me.loadMask)
{
me.loadMask.unmask();
}
me.loadMask = me.loadMask || (targetEl ? me.getTargetEl() : me.el);
me.loadMask.mask(msg);
}
else if (me.loadMask)
{
me.loadMask.unmask();
me.loadMask = null;
}
}
}
});

After overriding the setLoading function, you don't have to alter your code in any way, as long as you do not use configuration objects for LoadMasks (as those are not involved in this solution).
LoadMasks are floating components and therefore float above all static components. This implementation just sets a mask on the component itself.

BertM
21 Jan 2012, 3:35 PM
If you really do not want the lines to break in Chrome, you could try replacing any space characters with " " in the msg variable just before me.loadMask.mask(msg).

BertM
23 Jan 2012, 1:15 PM
Another, more elegant fix for this problem is the following. Instead of rewriting the caller code, let's now rewrite the callee: LoadMask is the culprit, not AbstractComponent. This should also work for LoadMasks coupled to stores etc.


Ext.define('Ext.LoadMask',
{
extend: 'Ext.util.Observable',

constructor: function(el, config) {
var me = this;

this.addEvents(
'beforehide',
'hide',
'beforeshow',
'show',
'beforedestroy',
'destroy'
);

if (el.isComponent)
{
me.maskElement = el.getEl();
}
else
{
me.maskElement = el;
}
this.superclass.constructor.apply(this, [config]);

if (me.store)
{
me.bindStore(me.store, true);
}
},

bindStore : function(store, initial)
{
var me = this;

if (!initial && me.store)
{
me.mun(me.store, {
scope: me,
beforeload: me.show,
load: me.hide,
exception: me.hide
});
if (!store)
{
me.store = null;
}
}
if (store)
{
store = Ext.data.StoreManager.lookup(store);
me.mon(store, {
scope: me,
beforeload: me.show,
load: me.hide,
exception: me.hide
});
}
me.store = store;
if (store && store.isLoading())
{
me.show();
}
},

enable: function()
{
this.show();
},

disable: function()
{
this.hide();
},

show: function()
{
this.fireEvent('beforeshow', this);
this.maskElement.mask(this.msg || 'Loading...');
this.fireEvent('show', this);
},

hide: function()
{
this.fireEvent('beforehide', this);
this.maskElement.unmask();
this.fireEvent('hide', this);
},

destroy: function()
{
this.fireEvent('beforedestroy', this);
this.hide();
this.fireEvent('destroy', this);
}
});

This code simulates the (most important) behaviour of LoadMask, thereby replacing LoadMask entirely.