How to show loading/busy icon?

[vikas.m.yadav]

How to show loading/busy icon in smartGWT while some operation is going on?

In gwtEXT there was mask/unmask call to show loading message.

		  final ExtElement element = Ext.get("mainPanel");
		  if(!state)
			  element.mask("Fetching data...");
		  else
			  element.unmask();

Thanks in advance,
Vikas

[benzwahlen]

I had the same question a while back. In the end, it was a workaround that did it for me. Try this:

Window dlg = new Window();
Label label = new Label(" Waiting for server...");
dlg.setShowCloseButton(false);
dlg.setShowMinimizeButton(false);
dlg.setShowBody(true);
dlg.setShowHeader(true);
dlg.setShowMaximizeButton(false);
dlg.setTitle("");
dlg.setShowTitle(false);
dlg.setAutoCenter(true);
dlg.setCanDragReposition(false);
dlg.setCanDragResize(false);
dlg.setWidth(300);
dlg.setHeight(130);
dlg.setShowModalMask(true);
dlg.setIsModal(true);
dlg.addItem(label);
dlg.setOverflow(Overflow.HIDDEN);
dlg.show();

Maybe not the greatest solution. You may also need to customize it for your needs.

Hope this helps.

Regards,
Ben

[mhulsman]

I did the same thing but added a Progressbar to the Window which my boss loves.

[benzwahlen]

I did the same thing but added a Progressbar to the Window which my boss loves.

http://www.ajaxload.info/

^ Bosses love this stuff

[Isomorphic]

There's a built-in API SC.showPrompt() / clearPrompt() for simple cases of this. You can add a spinner image by just adding an <img> tag to the title, since it's HTML.

[vikas.m.yadav]

Thanks a lot to all of you for your suggestions.

[sreejipnr]

Hi,

The above example are giving a window and animation icon in it. Is there any way to hide the window, so that can show only the animated icon in the screen.

Thanks in advance.

Sreejith-

[svjard]

Here is another alternative. You could wrap this in a class and use static methods so it works like SC pretty easily. The Canvas can be removed or not, it just provides an overlay. But that is the general idea.

 VLayout vLayout = new VLayout();
 vLayout.setAutoHeight();
 vLayout.setAutoWidth();
 Img i = new Img();
 i.setSrc("large-loading.gif");
 i.setWidth(32);
 i.setHeight(32);
 vLayout.addMember(i);
 vLayout.showClickMask(null, ClickMaskMode.HARD, null);
 vLayout.setTop((Window.getClientHeight() / 2) - 32);
 vLayout.setLeft((Window.getClientWidth() / 2) - 32);
 Canvas c = new Canvas();
 c.setWidth100();
 c.setHeight100();
 c.setBackgroundColor("#333333");
 c.setOpacity(60);
 c.bringToFront();
 vLayout.bringToFront();
 c.draw();
 vLayout.draw();

[sreejipnr]

Thanks a lot. It worked for me.

[jvincent]

Are the suggestions mentioned in this thread still the best way to implement a modal loading message?

SC.showPrompt() does not mask the screen behind it.

[Isomorphic]

jvincent your question seems unrelated. What do you mean it "does not mask the screen behind it" - are you looking for the grey-out affect that appears when you setUseModalMask(true) on a Window? Because you can get that effect in a loading message by using a Window as the loading message.

[jvincent]

Yes, that is exactly what I mean. I have implemented it as a window. I was just curious as to whether SmartGWT had created a method that would allow a LoadMask to be called directly.

For example, I have created my own LoadMask class that creates a displays a modal window:

public class LoadMask extends Window {
	
	public LoadMask(String windowTitle, String loadingMessage) {
		Label label = new Label(loadingMessage);
		label.setWrap(false);
		label.setPadding(5);
		label.setWidth100();
		label.setHeight100();
		label.setBackgroundColor("#fff");
		label.setShowEdges(false);
		label.setAlign(Alignment.CENTER);	
		
		this.setTitle(windowTitle);
		this.setWidth(300);
		this.setHeight(100);
		this.setAutoCenter(true);
		this.setIsModal(true);
		this.setShowModalMask(true);
		this.setHeaderControls(HeaderControls.HEADER_LABEL);
		this.addItem(label);
		this.draw();
	}
}