Solved(kind of): Action bar rendering, timing loadmask, hide rendering?

[mth96a]

is there any way to hide the rendering on the action bar until it looks good?

[jratcliff]

I'll see what we can do. If you notice in the source code we currently were playing around with "visibility: hidden" on the body tag and then un-hiding it after the call to the frm render code. However, that doesn't work since the code for the action bar makes an async Ajax call to get the xml of the action bar. Perhaps we can have a callback on the actionbar ajax call to unhide the body tag...:-?

[mth96a]

i was generating a unique number to filter a view with and because of when the number was generated and when the view was built, the filter would not work, so i had to call the view init in the response to the number generation.

[mth96a]

Create a mask(like the one below) with manual timing and put it at the beginning of the js header, i changed my ext-all.css to take away transparency from the mask hiding what is happening behind it

CSS
.ext-el-mask{z-index:20000;position:absolute;top:0;left:0;background-color:#FFFFFF;width:100%;height:100%;zoom:1;}

JS Header


var MaskApp = function() {
return {
init : function(){
MaskApp.startMask.hide()
} // init
} // return
}();
Ext.onReady(
function(){MaskApp.startMask = new Ext.LoadMask(document.body,{});
MaskApp.startMask.show('Setting Up Your Grid...');
MaskApp.init.defer(3000,MaskApp);}
, MaskApp, true);


You can play with the amount of time the mask last by changing the amount in

MaskApp.init.defer(3000,MaskApp);

Now if i could just get it to fade out nicely...

[mth96a]

Change the init.defer amount to add or subtract time, seems like it is milliseconds


MaskApp = function() {
return {
init : function(){
MaskApp.startMask.hide()
MaskApp.startMask2.el.fadeIn();
} // init
} // return
}();

Ext.onReady(function() {
var frm = new Ext.nd.Form();
frm.render();
// mask ugliness
formbody1= document.getElementById("xnd-form-pnl");
MaskApp.startMask = new Ext.LoadMask(document.body,{});
MaskApp.startMask.show()
MaskApp.startMask2 = new Ext.LoadMask(formbody1,{});
MaskApp.startMask2.el.setOpacity(0);
MaskApp.init.defer(700,MaskApp);
});

[dominodeviant]

Is it for 2.0 or does it work with Ext 1.0?
I get an error on line MaskApp.startMask = new Ext.LoadMask(document.body,{});

The purpose is to hide the action bar rendering untill its loaded and looks good.

[mth96a]

it is to hide the entire form until it is rendered

[dominodeviant]

Hiding the entire form will also do.
Can the code be adapted to work with Ext 1?

[mth96a]

I looked at the API for version 1 and it does not look like loadmask has changed at all, do you have firebug?

Is this on a form?

Can you browse firebug and find document.body?

[dot.Scott]

Nice ! That worked very well. Now if I can just get my Action button icons to show in IE... FF works like it should but IE doesn't. Before I implemented this code, the actionbar was drawn as a simple table but did have the icons. As soon as the ActionBar is rendered, no more icons.

Thanks again!