View Full Version : How to make the mask not over the docked toolbar.

21 Jul 2011, 8:26 PM
I have a panel with a docked toolbar on top. After the store is loaded, it will add a carousel to panel.

When the store is loading, I want to display a mask to show loading message. However, I do not want the mask over the toolbar, so user can hit the "Back" button to go back.

I tried to search for solution, but I cannot find any clues yet.


22 Jul 2011, 2:43 AM
sure you can!
I wrote you a simple example that show you how to do that:

onReady: function() {

var mask;

var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
title: 'Example',
items: [{
xtype: 'button',
text: 'Back',
handler: function(){

Ext.Msg.alert('Back', 'The back button has been Tap');

xtype: 'button',
text: 'Show Mask',
handler: function(){

//Create and show the mask only on panel body
mask = new Ext.LoadMask(panel.body, {msg:"Please wait..."});



Hope this helps.