PDA

View Full Version : [OPEN][BUG] Ext.Application loadmask



gevik
10 Mar 2011, 6:29 AM
It seems that the the implementation logic of the initLoadMask function is kind of wrong. If my page already contains a div with id="loading-mask" then a new div with the same id is created, but never removed.

The current initLoadMask function only works when the div to be removed has a different id than "loading-mask"

To test this:
[1] first include the known CSS rules for the load mask divs
[2] place the following div before calling Ext.Application
[3] set useLoadMask : true in Ext.Application


<div id="loading-mask">
<div id="loading">
<div class="loading-indicator">
Loading...
</div>
</div>
</div>

<script>
var MyApp = new Ext.Application({
name: 'MyApp',
useLoadMask:true,
autoInitViewport:false,

launch: function() {
this.viewport = new Ext.panel.Panel({
title:'My Application',
id : 'mainPanel',
renderTo:Ext.getBody(),
items : [
{
html: 'Welcome to My App!'
}
]
});
}
});
</script>


The following code is a possible fix:


Ext.override(Ext.Application,{
initLoadMask: function() {
var useLoadMask = this.useLoadMask,
defaultId = 'loading-mask',
loadMaskId = (typeof useLoadMask == 'string') ? useLoadMask : defaultId;

if (useLoadMask) {
var loadingMask = Ext.get(loadMaskId);
if(loadingMask == null)
{
loadingMask = Ext.getBody().createChild({id: defaultId});
}
fadeDuration = this.loadMaskFadeDuration,
hideDuration = this.loadMaskRemoveDuration;

Ext.defer(function() {
loadingMask.addCls('fadeout');

Ext.defer(function() {
loadingMask.remove();
}, hideDuration);
}, fadeDuration);
}
}
});

gevik
7 Apr 2011, 11:56 PM
any news on fixing this?