PDA

View Full Version : Time dependent Nonmodal alert dialog



new2extjs
20 Sep 2011, 11:18 AM
How can we create Nonmodal alert dialog that hides itself after few seconds?
I created one but don't know how to associate this with time parameter?



new Ext.Window({
title: 'Title',
html: 'message!!!',
modal: false,
}).show();

burnnat
20 Sep 2011, 12:17 PM
You can use the Ext.defer (http://file:///C:/Users/burnnat/workspace/ExtJS%20Sandbox/docs/index.html#%21/api/Ext-method-defer) function to set a delay. Using your example:


var dialog = new Ext.Window({
title: 'Title',
html: 'message!!!',
modal: false
});

dialog.show();

Ext.defer(function() {
dialog.hide();
}, 3000);

Alternatively, you could use a DelayedTask (http://file:///C:/Users/burnnat/workspace/ExtJS%20Sandbox/docs/index.html#%21/api/Ext.util.DelayedTask) instead, depending on the specifics of the behavior you're looking for.

new2extjs
22 Sep 2011, 9:02 AM
Thanks a lot for the reply.
Rightnow the window appears in the centre of the page. Is there any way to align it towards right, left or any other position?

burnnat
22 Sep 2011, 10:20 AM
Sure, just use the Window.alignTo() (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.window.Window-method-alignTo) method.

new2extjs
24 Sep 2011, 9:19 AM
Thanks for the reply. I did following but it doesn't work. I am a bit confused about the parameter. What it actually should be?
I read this http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.Window-method-alignTo
so I passed dialog i.e instance of window. Please correct me where I went wrong.



dialog.alignTo(dialog, "bl-br", new int[]{2,2});

burnnat
26 Sep 2011, 6:04 AM
You just have a couple mistakes:


The first parameter should be the component that you want to align the window with. In your example, you'd be aligning the window with itself, which doesn't make much sense. If there's a particular panel or other component you want to align with, you should pass a reference to it. Otherwise, pass the id string of an HTML element on the page, or use Ext.getBody() (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext-method-getBody) if you want to align with the entire page body.
new int[] { 2, 2 } is the proper way to instantiate an array in Java, C, or other similar language, but not in Javascript. All you need is this: [2, 2]
If you align with the page body, as I think you want to do, the given coordinates will render the window outside the visible page area, since the bottom-left corner of the window will be lined up with the bottom-right corner of the page, plus two pixels to the right and two pixels down.

Here's how you'd align the window in the bottom-left of the page with a 5px margin:

dialog.alignTo(Ext.getBody(), "bl-bl", [5, -5]);