View Full Version : progressbar centered and mask over specific panel

2 Jan 2010, 5:28 AM
Following code seems to mask the entire document. If I have a panel in "center" how do i mask out my specific panel and have this centered over it?

title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width: 300,
progress: true,
closable: false


2 Jan 2010, 5:40 AM
You can't use an Ext.MessageBox for that, but you could use:

var p = Ext.getCmp('id-of-center-panel');

2 Jan 2010, 9:41 AM
Thanks Condor - that was a workaround i managed to get working cheaply.

Ideally i want a progress bar (or a way to fake it). Is there a way to add your own components to a mask ie. fake the mask by using a window? I read on some other threads ppl having issues being able to center the window in a specfic container.


2 Jan 2010, 9:51 AM
The mask message can contain HTML. You could add a progress bar there.

3 Jan 2010, 7:47 AM
Interesting... i did something like this:

Ext.getCmp('mycomp').body.mask('<div id="pbar"></div>');

var progressBar = new Ext.ProgressBar({
width: 200,
renderTo: 'pbar'

and it sort of works but looks really funky. I see many nested boxes out of alignment.


4 Jan 2010, 12:20 AM
You need some extra css rules for .pbar to fix the display.

ps. Don't forget to destroy the progressbar before unmasking the panel (otherwise you get a memory leak).

14 Jan 2010, 11:48 PM
Hi All,

i have a parent component as panel , and inside that panel i have added several panels.
I m adding radiogroups in inner panel.
My requirement is to mask the inner panels on their expand.
I did same using :

But it masks whole document.

Im looking for a situation where i can mask inner-panel-one and at the same time i can fill details in inner-panel-zero which is already expanded.

Please provide your views on same.

Thanks in advance

15 Jan 2010, 12:24 AM
It masks the whole document? It shouldn't do that!

ps. Masks don't automatically size with their element. If the masked element changes size you will need to update the mask also.