View Full Version : image without window frame

14 Dec 2010, 5:46 AM
I want to display a loading wheel image while some processing takes place.
While the code below works, it shows a frame around the image.
I want to show just the image in a transparent background.

Also, is 'label' the right container for images?
Please help.

var LoadingWindow = new Ext.Window({
id: 'loadingWindow',
closable: false,
modal: true,
width: 100,
height: 100,
x: (document.body.offsetWidth ) / 2,
y: (document.body.offsetHeight - 100) / 2,
layout: 'fit',
items: [{xtype: 'label', html: '<img src="../Images/loading.gif" />'}]

14 Dec 2010, 6:05 AM
1. Do you really need a window for this? You could also use:

Ext.getBody().mask('<img src="../Images/loading.gif" />');
(maybe specify an extra class if you want it to display differently)

2. 'box' would be the preferred type to display an image, e.g.

{xtype: 'box', autoEl: {tag: 'img', src: '../Images/loading.gif'}}

14 Dec 2010, 10:50 PM
Thank you, Condor.
mask() and unmask() work beautifully and save a lot of coding.
One question though..
The API of mask() says it takes 2 params:
1. msg (optional) A message to display in the mask
2. msgCls (optional) A css class to apply to the msg element

and yet an HTML tag works as the first param. Why is this?

14 Dec 2010, 11:32 PM
Most text config options in Ext can contain HTML markup.