PDA

View Full Version : Ext.ux.Notification



efattal
14 Apr 2008, 2:07 AM
UPDATE 09.16.2008 : TOASTWINDOW IS DEAD. NOTIFICATION IS ALIVE.
I took in account your different contributions, especially that of jmcneese. I adopted the new name Ext.ux.Notification that seems more compliant to Ext spirit. I brought some corrections.

Enhancement: when you click on the notification window, it sticks and the close button shows up.

It seems to be OK in my different browsers.

Thanks a lot.

The attached source code (and the online demo (http://efattal.fr/extjs-dev/examples/toastwindow/)) includes a sound effect when the window ejects.

Old post:
Here is a small extension that displays unobstrusive message sliding windows like those in Outlook.

Demo: http://www.efattal.fr/extjs-dev/examples/toastwindow/

CSS:

.error{background-image:url(../images/icons/gif/exclamation.gif);}
.information{background-image:url(../images/icons/gif/information.gif) ! important;}


Ext.ux.ToastWindowMgr = {
positions: []
};

Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'information',
width: 200,
height: 100,
autoScroll: true,
autoDestroy: true,
plain: false
});
this.task = new Ext.util.DelayedTask(this.hide, this);
Ext.ux.ToastWindow.superclass.initComponent.call(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onRender:function(ct, position) {
Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
},
onDestroy: function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);
Ext.ux.ToastWindow.superclass.onDestroy.call(this);
},
afterShow: function(){
Ext.ux.ToastWindow.superclass.afterShow.call(this);
this.on('move', function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);
this.task.cancel();}
, this);
this.task.delay(2000);
},
animShow: function(){
this.pos = 0;
while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
this.pos++;
Ext.ux.ToastWindowMgr.positions.push(this.pos);
this.setSize(200,100);
this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);
this.el.ghost("b", {
duration: 1,
remove: true,
scope: this,
callback: this.destroy
});
}
});


Usage:


new Ext.ux.ToastWindow({
title: 'My title',
html: 'My Message',
iconCls: 'error'
}).show(document);

May this code be useful to someone.

krycek
14 Apr 2008, 5:45 AM
Really cool!
Here is a code to be put into examples/toastwindow to test it:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ToastWindow</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script>


Ext.ux.ToastWindowMgr = {
positions: []
};

Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'information',
width: 200,
height: 100,
autoScroll: true,
autoDestroy: true,
plain: false
});
this.task = new Ext.util.DelayedTask(this.hide, this);
Ext.ux.ToastWindow.superclass.initComponent.call(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onRender:function(ct, position) {
Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
},
afterShow: function(){
Ext.ux.ToastWindow.superclass.afterShow.call(this);
this.on('move', function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);
this.task.cancel();}
, this);
this.task.delay(2000);
},
animShow: function(){
this.pos = 0;
while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
this.pos++;
Ext.ux.ToastWindowMgr.positions.push(this.pos);
this.setSize(200,100);
this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);
this.el.ghost("b", {
duration: 1,
remove: true
});
}
});
Ext.onReady(function()
{
new Ext.ux.ToastWindow({
title: 'My title',
html: 'My Message',
iconCls: 'error'
}).show(document);
});
</script>
</head>
<body>


</body>
</html>


Is there a way to prevent the scrollbar to show when the window is hiding?

efattal
14 Apr 2008, 7:32 AM
Thanks krycek, I added a demo page on line.

Animal
14 Apr 2008, 7:43 AM
Neat!

There's smoething funny about the stop pos if you close a wnidow though. When a window has appeared, press ESC to close it. The next window starts its popup from the top of the last wnidow. if you ESC that one, the next one starts higher up too until they go off the top of the screen!

efattal
14 Apr 2008, 7:50 AM
Thanks Animal. Code has been corrected.

BTW, thanks for all the good job you do for the community.

Animal
14 Apr 2008, 7:57 AM
That works, that's what the onXXX functions are for; to allow each subclass to contribute their own functionality at each stage of the lifecycle.

With that in mind, it's important to remember to call the superclass's onXXX function, to allow it to perform its own necessary contribution at that stage. As you have it, the Window will not actually be destroyed.

efattal
14 Apr 2008, 8:00 AM
Of course. Code corrected. Thanks again.

Animal
14 Apr 2008, 8:23 AM
That doesn't actually get called if you let the windows fade out. You need to callback to the destroy function at the end of the fade out animation.

Test with Firebug open to the HTML tab. You can see the document filling up with every popup you ask for!

jay@moduscreate.com
14 Apr 2008, 9:30 AM
mmm... toast.

great work :)

wm003
14 Apr 2008, 10:30 AM
Very nice, thanks for sharing.

On Firefox the toasts do a little stuttering and the bottom line looks somehow...uhm...messy while fading in...

efattal
14 Apr 2008, 11:30 AM
That doesn't actually get called if you let the windows fade out. You need to callback to the destroy function at the end of the fade out animation.

Thanks for all your advices, Animal. But let me understand: the config of the window specifies "autoDestroy: true" and the Ext.FX.ghost is called with "remove: true", still these are not enough and I have to call "this.destroy()"? :-?

joku
18 Apr 2008, 8:31 AM
sexy!

fangzhouxing
17 May 2008, 10:10 PM
great work!

anjelika
29 May 2008, 6:06 AM
Cool extension.
Is there a way to make the window stay on the screen and not dissapear after a specified time?
I've looked through your code but couldn't figure it out.
Thanks

jmcneese
29 May 2008, 8:19 AM
here's how i do it (with a tweaked version of toastwindow):



Ext.ux.NotificationMgr = {
positions: []
};

Ext.ux.Notification = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'x-icon-information',
width: 200,
autoHeight: true,
closable: false,
plain: false,
draggable: false,
bodyStyle: 'text-align:center;padding:1em;'
});
if(this.autoDestroy) {
this.task = new Ext.util.DelayedTask(this.hide, this);
} else {
this.closable = true;
}
Ext.ux.Notification.superclass.initComponent.call(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onRender:function(ct, position) {
Ext.ux.Notification.superclass.onRender.call(this, ct, position);
},
onDestroy: function(){
Ext.ux.NotificationMgr.positions.remove(this.pos);
Ext.ux.Notification.superclass.onDestroy.call(this);
},
afterShow: function(){
Ext.ux.Notification.superclass.afterShow.call(this);
this.on('move', function(){
Ext.ux.NotificationMgr.positions.remove(this.pos);
if(this.autoDestroy) {
this.task.cancel();
}
}, this);
if(this.autoDestroy) {
this.task.delay(this.hideDelay || 5000);
}
},
animShow: function(){
this.pos = 0;
while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
this.pos++;
Ext.ux.NotificationMgr.positions.push(this.pos);
this.setSize(200,100);
this.el.alignTo(document, "br-br", [ -1, -1-((this.getSize().height+10)*this.pos) ]);
this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
Ext.ux.NotificationMgr.positions.remove(this.pos);
this.el.ghost("b", {
duration: 1,
remove: true
});
}
});
and the example usage:


new Ext.ux.Notification({
iconCls: (iconCls) ? iconCls : 'x-icon-exclamation',
title: (title) ? title : 'Notice',
html: message,
autoDestroy: false,
}).show((anchor) ? anchor : document);
or

new Ext.ux.Notification({
iconCls: 'x-icon-error',
title: 'Ruh-row',
html: 'This is just a stub. This is only a stub. If this would have been a real functioning doo-dad, you never would have even seen this stub.',
autoDestroy: true,
hideDelay: 5000
}).show(document);

NoahK17
29 May 2008, 10:24 AM
I also notice the flickering in Firefox 3 RC1... any suggestions on how to fix it?

anjelika
29 May 2008, 11:36 PM
Thanks jmcneese, works nice ;)

anjelika
2 Jun 2008, 5:34 AM
One more feature, pls :P
How can I disable the hide method as long as the mouse is over the window and re-enable it after the mouse is out?
Something like this, in pseudocode:


while (mouse_over) {stop the hide_timer}
Couldn't find any mouse events available to Ext.Window tho.
Any ideas?

jveljan
3 Jun 2008, 10:27 AM
One more feature, pls :P
How can I disable the hide method as long as the mouse is over the window and re-enable it after the mouse is out?
Something like this, in pseudocode:


while (mouse_over) {stop the hide_timer}Couldn't find any mouse events available to Ext.Window tho.
Any ideas?


Hi anjelika,

After show you can use:

window.getEl().on('mouseover', function(){ /*cancel hide task*/ });
window.getEl().on('mouseout', function(){ /*start hide task*/ });

I dont have time to test this, but I think it will work for you.

learningExt
14 Jul 2008, 8:23 AM
Love the toast!!! I've added a short line of code to the bottom so it can be called like an alert()...



/**
* Shorthand way of creating a toast window as an alert in one line.
*/
function toastAlert( the_message, the_title, the_icon ) {
// Set defaults for the toast window title and icon
the_title = typeof(the_title) != 'undefined' ? the_title : 'Notice';
the_icon = typeof(the_icon) != 'undefined' ? the_icon : 'icon-information';

// Create the toast window
new Ext.ux.ToastWindow({
title: the_title,
html: the_message,
iconCls: the_icon
}).show(document);
} // eo function toastAlert
Now all I do is call toastAlert('Message here...'); and up pops the toast... Or I can specify a title and icon to add to the toast alert i.e. toastAlert('Message here...','Notification','icon-calendar');

belgattitude
29 Jul 2008, 1:46 AM
Hi,

just tested it today, works perfect... The only problem is that the (toast|notification)window takes focus when displayed. To change that behavior, we can simply overrides Ext.Window.focus() method :

Just add at the end the following method


animHide: function(){
Ext.vision.dialog.NotificationMgr.positions.remove(this.pos);
this.el.ghost("b", {
duration: 1,
remove: true
});
},
focus: Ext.emptyFn


Better alternative is to provide a config param...

Note also that when showing it on document.body, scrollbars may appear. Fix it in the CSS by adding


body {
overflow: hidden;
}


Thx

ajaxvador
29 Jul 2008, 3:37 AM
Suggestion ! add sound in this plugin.

=D>=D>=D>

ThorstenSuckow
26 Aug 2008, 4:22 PM
Here is a small extension that displays unobstrusive message sliding windows like those in Outlook.


This is really usefull... what's the license for this extension?

fangzhouxing
26 Aug 2008, 6:53 PM
Can not visit : http://www.efattal.fr/extjs/examples/toastwindow/

efattal
16 Sep 2008, 2:15 AM
Hi all,

I modified my first post (http://extjs.com/forum/showthread.php?p=152336#post152336) releasing a new version.

mystix
16 Sep 2008, 8:28 AM
Hi all,

I modified my first post (http://extjs.com/forum/showthread.php?p=152336#post152336) releasing a new version.

your Ext.ux.Notification ux rocks! =P~

p.s. you've gotta swap the m$-style alert for a mac-style Growl :D
p.s.s. i've updated the thread title with the name of your new plugin. let me know if it should be otherwise.

mjlecomte
16 Sep 2008, 1:38 PM
Cool. Have you thought to post this in the ux repository? Makes for easier updating/documenting, etc.

I like how you can click on the button multiple times and get multiple notifications above the older ones.

kk_kkk
16 Sep 2008, 10:09 PM
hi, canot open and upzip the files using winrar when i download the notification.zip.

is't bug?

efattal
16 Sep 2008, 11:08 PM
hi, canot open and upzip the files using winrar when i download the notification.zip.

is't bug?

I can. So maybe your download was corrupted. Try again.

mystix
16 Sep 2008, 11:08 PM
hi, canot open and upzip the files using winrar when i download the notification.zip.

is't bug?


download with Firefox. do not download with m$IE.

efattal
17 Sep 2008, 12:26 AM
download with Firefox. do not download with m$IE.

That's right. :-? I wonder what happens with IE?

dolittle
17 Sep 2008, 12:35 AM
The new release is cool.

Maybe it will be better if the close button will be available all the time?

wm003
17 Sep 2008, 1:31 AM
When clicking the eject button on the new online demo page firefox 3.0.1 crashes everytime...:((

mystix
17 Sep 2008, 6:50 AM
That's right. :-? I wonder what happens with IE?

it can't handle this forum's gzip compression apparently. ~o)

jmcneese
17 Sep 2008, 8:13 AM
hey, that stub message looks familiar ;)

mjlecomte
19 Sep 2008, 5:20 AM
Anyone notice all of the orphaned elements in the DOM? Looks like the destruction/garbage collection may need some attention?

evant
19 Sep 2008, 5:49 AM
Yeah, but it's because the default auto destroy behaviour for the plugin is to hide the window:



if (this.autoDestroy)
this.task = new Ext.util.DelayedTask(this.hide, this);
else
this.closable = true;

mjlecomte
19 Sep 2008, 6:01 AM
Too right. I don't understand that part.

if you set autoDestroy = true, wouldn't it be appropriate to destroy it, not hide it?

I'm confused what the intent behind that code is.

evant
19 Sep 2008, 6:08 AM
Should probably replace this.hide with this.close, it's not like you're going to reuse the toast.

efattal
19 Sep 2008, 6:23 AM
Hi guys,

You're right. I don't remember why I choosed Hide... :-? I'll correct that soon. Thanks.

mjlecomte
19 Sep 2008, 10:36 AM
One more observation. Even after calling destroy() there is still a "x-shadow" class present in the DOM. I see from the source it may be there for caching purposes. I don't know about that, but in this example, I noticed that for subsequent notification windows the Z-Index of this element creeps by 10 each time.

Could the incrementing of the z-index eventually be a problem if this is left to run on like that?

I think the shadow in question is from the notification window as it doesn't exist in the DOM until the notification window is first called, and the size appears commensurate with the notification window.

SamuraiJack1
24 Sep 2008, 2:52 AM
Great extension.

May I publish it in repository? (with you as author of course) I'm using it personally and would like to add new features it in the sane way (through svn patches)

abhishek611plus
1 Nov 2008, 4:04 AM
guys,
i m using EXTJS Desktop ... its working .. the only is when i m opening any window..this notification remains visible over the window...


any solution????

bloon
4 Nov 2008, 2:07 PM
Hi All, sorry for english,:">

this is my addition in toastalert function



toastID = '';
function toastAlert( the_message, the_title, the_icon, autoDestroy ) {
the_title = typeof(the_title) != 'undefined' ? the_title : 'Notice';
the_icon = typeof(the_icon) != 'undefined' ? the_icon : 'icon-information';
autoDestroy = typeof(autoDestroy) != 'undefined' ? autoDestroy : false;
if (the_icon == 'icon-information') {
imgIcon = 'images/icons/information.png';
} else if (the_icon == 'error') {
imgIcon = 'images/icons/error.png';
} else {
imgIcon = 'images/icons/note.png';
}
tmp1 = '<table cellpadding=2 cellspacing=0>';
tmp1 += '<tr>';
tmp1 += '<td width="10%" style="padding-right: 8px; vertical-align:top;align:left">';
tmp1 += '<img src="' + imgIcon + '" width=32 height=32 border="0"></td>';
tmp1 += '<td width="90%" style="font-size: 11px; font-family: Verdana, ';
tmp1 += 'sans, Arial; vertical-align:top">'+the_message+'</td>';
tmp1 += '</tr></table>';
if (toastID == '') {
tmp = new Ext.ux.Notification({
title: the_title, iconCls: the_icon, autoDestroy: autoDestroy,
// html: the_message
html: tmp1
});
} else {
if (!Ext.isEmpty(Ext.getCmp(toastID))) {
Ext.getCmp(toastID).animHide();
}
tmp = new Ext.ux.Notification({
title: the_title, iconCls: the_icon, autoDestroy: autoDestroy,
// html: the_message
html: tmp1
});
}
tmp.show(document);
toastID = tmp.id;
return tmp.id;
}
it's to remind the toastwindow if it's already popup then the next message will placed in the same window. for me, it's effective to avoid recurrance of notification window in the right side. also, i change it into a table, where the icon resize into 32x32 pixels and the message in the right side.

Bulle Bas
10 Nov 2008, 7:24 AM
Strangely enough, I hear a nice sound in Internet Explorer 7, whereas Firefox 3.0.3 doesn't play any sound.

fxmisticat
10 Nov 2008, 9:59 AM
Strangely enough, I hear a nice sound in Internet Explorer 7, whereas Firefox 3.0.3 doesn't play any sound.

I had to use soundManager2 for firefox

Bulle Bas
10 Nov 2008, 11:03 AM
Thanks for the tip. If I need to use this, I will certainly refactor it to soundmanager2.

lol@website:

SoundManagR 2.0 Beta™ is a social, long-tail-oriented RIA-based enterprise javascript sound platform which leverages streaming AJAX push technology, Web 2.0, and leveraging. Including plenty of ajaxy goodness, this turn-key, SOA-based and Ajax-enhanced platform will take your Rich Enterprise Applications to the next level, connect the dots and move the needle when mashed up with Web 2.0 collective wisdom of the crowd-wowing features such as drag and drop, auto-complete and real-time performance thanks to enterprise mashup servers.

By leveraging the collective blogosphere and rich folksonomy aspects of the web, it is expected that these supporting technologies may be joining the RIP (Rich Internet Professionals) and DOA (Development Of Asininity) groups within the next few years.

michaelc
13 Nov 2008, 6:53 PM
Hello looking at using this.
I seem to have two minor items.

1. the sound is not available, in firefox 3 ( super trivial ) I also see the fix three notes above if I want it.

2. in IE7 if I click on the alert/dialog box the cancel x never shows up, unless I click on the edge of the actual dialog. this is a problem. if the user clicks on the dialog, it will never go away.

I see that protoculous-packer.js is for the sound effect, does it have any other value ?

mjlecomte
13 Nov 2008, 9:09 PM
Michael, you might want to also check out my version:
http://extjs.com/forum/showthread.php?t=48135

keckeroo
10 Dec 2008, 9:39 AM
How would I go about making the 'text' of the notificatication actually do things ? I've managed to inject html anchors into the message and that works, but i'm stumped as to how to close the notification window when any link is clicked ... eg ....



QoDesk.getDesktop.showNotification({
html: ''Service unavailable ... Click <a href="#" onclick="QoDesk.chatManager.doLogin(false); this.close(); return true;">here</a> to reconnect.',
autoDestroy: false
});


Basically - just like msn - i'm trying to do a notification that will stay there until the window is closed [x] or the anchor is clicked to perform a routine (but upon click i want the notification to close)

Thanks,

Kevin

mjlecomte
10 Dec 2008, 11:31 AM
Your sample code isn't relative to this extension especially, it's for a desktop extension. If you search for MessageWindow extension it may do some of what you're looking for. In the code snippet you posted I'd question what "this" is, I doubt it's pointing to the notification window, probably pointing at browser window object.

keckeroo
10 Dec 2008, 12:21 PM
You're correct - it isn't and that's my problem ... at this point in the game I'm not quite sure how to reference the window object from the 'text' of the message i'm passing to Ext.ux.Notification

(the desktop thing is a wrapper - i don't believe it should make too much of a difference, no ?)

Thanks

tiago.silva
10 Dec 2008, 12:26 PM
I was looking for something like this. Good job :)

Thanks,
Tiago

mjlecomte
10 Dec 2008, 12:27 PM
My point is, most people probably won't know what that is, so you're eliminating people from helping you by choosing to post code that isn't specific to this extension in the first place.

I would still look at the extension I pointed you to.

Barring that, why not direct your click event off to some function. Inside that function you could go through the steps to get a reference to your notification instance and close it, etc. Ext.getCmp or however you want to do it. The link I pointed you to you can just click on the notification and it would close (no link needed).

jgeewax
11 Dec 2008, 7:18 PM
Hi,

First, thank you so much for Notification. I love it.

Next, I found the need to allow customizable width notifications, custom bodyStyle, link callbacks, etc and have made a few changes that I wanted to share with the rest of the users here.

1) Customizable width:
There were two changes I made to support this. The first was changing the Ext.apply to Ext.appyIf on line 20. This let me override the width setting. The second change was on line 76 where I changed "this.setSize(200, 100);" to "this.setSize(this.width, 100);" which just uses the width setting (which defaults to the 200 from applyIf) instead of hard coding 200.
After I did that, I could do things like:



new Ext.ux.Notification({
title: 'Test',
html: 'Just a test',
width: 'auto'
}).show();
2) Customizing the bodyStyle
This came for free when I changed the apply to applyIf. Be careful as this lets you override the default text-align:center specified, so I did:



new Ext.ux.Notification({
title: 'Test',
html: 'Just a test',
bodyStyle: 'font-weight:bold;text-align:center'
}).show();
3) Link Callbacks
I wanted to put a hyperlink in the notification that you could click to do some other stuff and then close the window. I think this is something pretty specific to me, so I don't know if this is a useful improvement to the rest of the world, but I figured I'd share.
In the afterShow method, I added:




if (this.linkAction) {
var link = this.body.query("a");
if (link.length) {
link = Ext.get(link[0]);
link.on('click', this.linkAction, this);
}
}
Now I can do things like:



new Ext.ux.Notification({
title: 'Link Test',
linkAction: function() {
alert('You clicked the link!');
this.animHide(); // hide the notification window
},
html: '<a href="#">Click me!</a>'
}).show();
Thanks again for the extension.

Oh, for the people that want to just "have" these features w/o hacking them into the extension itself, I'm attaching my modified JS file.

drew
8 Jan 2009, 6:26 PM
Great extension.

Is there currently or will there be plans for some advanced notification.

e.g I know the extension can do this...
http://www.brentozar.com/buyingtime/Outlook2003/TrayNotification.gif

but I'd love to see and outlook global reminder style as well
http://i43.tinypic.com/f3idfn.png

Anyone gone down this path or thought it would be a good idea?

vayumahesh
5 Feb 2009, 8:30 AM
I am working on an extJs desktop application. Tried to add the 'Ext.ux.Notification' extension but just including the files is causing number of errors.

Here is my code in desktop.jsp



<script type="text/javascript" src="web/extJs/desktop/system/Ext.ux.Notification.js"></script>
<script type="text/javascript" src="web/extJs/desktop/system/protoculous-packer.js"></script>

<style>
body {overflow: hidden;}
.x-icon-error{background-image:url(web/extJs/desktop/system/exclamation.gif) ! important;}
.x-icon-information{background-image:url(web/extJs/desktop/system/information.gif) ! important;}
.x-notification .x-window-body{margin: 0;padding:1em ! important; width: auto ! important;}
.x-notification .x-tool-close{display: none}
.x-notification.fixed .x-tool-close{display: block}
</style>


I am getting the following errors.

1) 'this.mainbody.dom' is null or not an object error in Ext-all-debug.js file in the following code. (When a module with grid is accessed)

afterRender: function(){
this.mainBody.dom.innerHTML = this.renderRows();
this.processRows(0, true);
if(this.deferEmptyText !== true){
this.applyEmptyText();
}
},

2) 'Object does not support this property or method' error at the following code in ext-all-debug.js while clicking on grid rows.

show : function(){
this.showAt(this.getTargetXY());
},

3) When I click on the 'Start' Menu, I get an error 'this.focusEl is null or not an object' at the following code in ext-all-debug.js

doFocus : function(){
if(!this.hidden){
this.focusEl.focus();
}
},


I did the changes recommended in the thread at http://extjs.com/forum/showthread.php?t=51088 but errors still persist.

I added the following code as well as set 'autoFocus: false' in the Ext.ux.notification initComponent method.



Ext.override(Ext.Window, {
autoFocus: true,
toFront : function(){
if(this.manager.bringToFront(this) && this.autoFocus){
this.focus();
}
return this;
}

});

vayumahesh
5 Feb 2009, 11:24 AM
After doing some testing, I figured out what was causing the errors.

The 'protoculous-packer.js' file is conflicting with something I have and causing all those errors.

<script type="text/javascript" src="web/extJs/desktop/system/protoculous-packer.js"></script>

But, Without ''protoculous-packer.js', sound feature is not working. I really like the sound feature. I am not sure if there is any fix for this. Has anyone experienced similar issue and found a solution ?

vayumahesh
5 Feb 2009, 12:43 PM
I have downloaded the latest version of protoculous-packer.js from http://protoculous.wikeo.be/ website and that fixed the problem. All my errors are gone and sound also plays when the notification window pops up.

But, still having one issue. My Notification window is displayed at the center of the page and there is no animation. I am using the same code as in the example provided. But I am not sure which code is making the popup come from bottom-right corner in an animated way.

Here is my code.



var notifyWin = new Ext.ux.Notification({
iconCls: 'x-icon-information',
title: 'Message for ' + mgrCheckPenReq.getAt(0).data.engrName,
html: 'Number of requests pending response : <b>' + mgrCheckPenReq.getAt(0).data.numResPending + '</b>',
autoDestroy: true,
hideDelay: 5000,
listeners: {
'beforerender': function(){
Sound.enable();
Sound.play('web/extJs/desktop/system/notify.wav');
Sound.disable();
}
}
}).show();

jsakalos
6 Feb 2009, 12:16 AM
This question has already been asked but left unanswered: What is the license?

santhosh_chennai
11 Feb 2009, 11:16 PM
hi
Am using toast window in my application.. i want to change the position of the toast window to be appeared.. how to do that.. anybody please help me

mjlecomte
12 Feb 2009, 4:56 AM
hi
Am using toast window in my application.. i want to change the position of the toast window to be appeared.. how to do that.. anybody please help me

You may want to try Ext.ux.MessageWindow

AguilaLibre
27 Mar 2009, 2:43 PM
Hello Guys, nice work... I was wondering if the following is possible: We are using the Ext Desktop to contain multiple apps as this desktop can be used by multiple users. And the idea is to throw the message and use this 'notification' function so every online user (using the desktop in another computer at the same moment) can see the 'notification' too. Could someone guide me trough the correct direction to achieve this?

Thank you so much..

rednix
27 Mar 2009, 4:11 PM
First: JavaScript is client-side! So if you want to communicate between different clients (no matter if these clients use the same desktop/account/etc.) on different physical machines - you most likely have to go the route via a server (unless you know each client by IP and want to communicate directly with them).
So my proposal for your request is:
User 1 creates a message on his desktop. This message is saved via ajax/javascript/etc on the server storage (e.g. database/file/whatever). Every other user which are using the desktop listen on a kind of queue which polls /waits for new messages.
You can do this by repeatedly querying the appropriate server-logic /action/whatever via a javascript loop e.g. every 1 minute look for new messages. Have a look at the Pinger class (http://extjs.com/forum/showthread.php?t=24504) for this task.
If you got something back from the server-action - then show a notification message using this extension.

ry.extjs
30 Mar 2009, 5:16 PM
what is the purpose of setMessage, setTitle, and onRender functions?

it doesn't appear that they serve a purpose. you don't want to change the notification title and/or message after it has been shown. and the onRender function does nothing but call the original function from Ext.Window.

am i missing something?

panosru
30 Apr 2009, 5:46 AM
Lovely extension! Thank you for this!

I made a change on this, I think that the proper is to destroy the element after auto hide.


animHide: function(){
this.el.ghost("b", {
duration: 1,
remove: false,
callback : function () {
Ext.ux.NotificationMgr.positions.remove(this.pos);
this.destroy();
}.createDelegate(this)
})
}

Also with this you can add a destroy listener on Notifications for example:


new Ext.ux.Notification({
iconCls: 'icon-email',
title: item.data.title,
html: item.data.message,
autoDestroy: (item.data.sticky == 1)?false:true,
hideDelay: 5000,
closable: (item.data.sticky == 1)?true:false,
resizable: false,
draggable: false,
listeners: {
'beforerender': function(){
Sound.enable();
Sound.play('3rdparty/Notifications/notify.wav');
Sound.disable();
},
'destroy' : function () {
console.info(1);
}
}
}).show(document);

Joyfulbob
21 May 2009, 4:57 AM
First off, thanks for the great extension!

I placed it in one of our apps only to have this error (see attachment) when I click on labels of form fields on my tab panel. This is before I even click the button that pops up the notification window.


{
text: 'DON\'T click me!',
id: 'notification',
iconCls: 'nav',
handler: function(){
new Ext.ux.Notification({
iconCls: 'information',
title: 'Alert:',
html: 'I told you not to click me! <br>Now look what you\'ve done! ;) <br>If you apologize I won\'t <br>shut down your PC.',
autoDestroy: true,
hideDelay: 5000,
listeners: {
'beforerender': function(){
Sound.enable();
Sound.play('/cgidev/js/ExtJS/ext2/examples/notification/notify.wav');
Sound.disable();
},
'destroy' : function () {
console.info(1);
}
}
}).show(document);
}
}

I read an earlier post that said this is for a desktop app- is that true? It won't work otherwise?

Thanks in advance.

dizzyd
23 Jul 2009, 6:14 AM
I migrated my aplpicazione to version 3.0.0 of Extjs
Everything works perfectly, except for the Ext.ux.Notification
of which I do a massive use (I like this extension).
the problem is that when the notification disappears remains his shadow so persistent on all pages.

I tried with firefox and i.e. and the behavior is the same.

how can I fix this?

attaching a picture to explain better.

http://img515.imageshack.us/img515/4716/notifybugb.jpg

thanks for any hints. ;)

santhosh_chennai
23 Jul 2009, 7:33 AM
You are asking about Toast Window ?

dizzyd
23 Jul 2009, 10:40 PM
opssss!! Sorry wrong typing!
yes I'm asking abount toast Windows.... Ext.ux.Notification.

santhosh_chennai
23 Jul 2009, 10:49 PM
I think this is not the problem with toast window. it might be a problem in the browser you are using. I am also using it in my application it is working very well.
I had checked it out in Firefox version 3.0,ie7. and also i verified it in firefox 3.0 in linux

dizzyd
23 Jul 2009, 11:08 PM
hmmmmm.
I try my application to the firefox 3.0.12, to the firefox 3.5 and to the Internet Explorer 6.0....
And the behavior of the Ext.ux.Notification is the same (persistent shadow).

The same application with Ext3 RC2 works fine, on the same Browser on the same PC, so I think the problem not depending to the browser...

mailme_gx
27 Jul 2009, 4:01 AM
Hi All

I been trying this ext in my app, unfortunately I get an error el.style is undefined, if I change to .show(this) // button or .show(oMainviewport) // viewport instance it works with no animation. I tried setting animateTarget to document.viewport and got the same results, I tried the bare example and it works in the same bowser with same version of ext.

I tested with Ext 3.0 on FF 3.0.

I even tried with Ext.window and got same results, and ideas why there is no animation or why document has no style?

Thanks

GX

mailme_gx
27 Jul 2009, 4:58 AM
Hi All

sorry for the noise, it appears there was a conflict with another extension namely
ux.ManagedIFrame.[Element, Component,Panel, Portlet, Window]
http://extjs.com/forum/showthread.php?t=71961

I resolved this by updating the version I had.

GX

santhosh_chennai
27 Jul 2009, 5:17 AM
i had the problem with toast window like this in EXT2.0 but that is problem in browser configuration. i had an add-on any color in firefox when i removed that and tried the toast window worked correctly but for your case i am not ale find the reason for your problem sorry /:) when you got it solved kindly let me know what was the actual problem in toast window

mailme_gx
27 Jul 2009, 5:21 AM
Thanks for the reply santhosh_chennai

As I specified the problem was nothing to do with toast as the same error appeared with Ext.window or Ext.MessageBox , an ext extention I was using seems to have been doing something to the dom that effected this.

Sorry that I posted this on the wrong thread

Thanks

GX

santhosh_chennai
27 Jul 2009, 6:00 AM
it's k and also i replied for dizzyd (http://extjs.com/forum/member.php?u=47258) regarding his problem in toast window

Thanks & Regards

dizzyd
29 Jul 2009, 5:06 AM
i had the problem with toast window like this in EXT2.0 but that is problem in browser configuration. i had an add-on any color in firefox when i removed that and tried the toast window worked correctly but for your case i am not ale find the reason for your problem sorry /:) when you got it solved kindly let me know what was the actual problem in toast window

....Ok... I try this way too.
I've disable ALL firefox Add-on:

DownThemAll
FastDial
FireBug
FirePHP
javascript debugger
jdownFF
ubuntu firefox modifications
webdevelopperBut the behavior of the Ext.ux.Notification is the same (persistent shadow).
Other Ideas?

mailme_gx
29 Jul 2009, 5:15 AM
I have also noticed the persistent shadow, mainly when opening/closing the window quickly (under 1 second) if its displayed for a few seconds its fine, here is a snipit:



objSelf.msgWin = new Ext.ux.window.MessageWindow({
title:'there is work to be done',
html: 'working...',
plain: true,
autoHeight: true,
autoWidth: true,
shiftHeader: true,
baseCls: 'x-box',
clip: 'bottom',
autoHide: false,
iconCls: ''
}).show(Ext.getDoc());



hope this helps.
Browser/os/ext details as per my previous post, I dont use many extensions to ff appart from firebug and noscript.

mjlecomte
29 Jul 2009, 5:36 AM
Ext.ux.window.MessageWindow != Ext.ux.Notification !== ToastWindow

mailme_gx
29 Jul 2009, 6:01 AM
silly me thanks for the hint will report to correct owner :">I-|

mingming
29 Jul 2009, 11:04 PM
hi,

when i used at FF with Notification window,FF showed errors like these:

1)
Components is not defined

if(this.fireEvent("beforeload", this, options) !== false){
2)this.fireEvent is not a function

if(this.fireEvent("beforeload", this, options) !== false){


thank you for you help!

Ming

dizzyd
30 Jul 2009, 2:05 AM
Have you in your page the include line look like this?


<script language="JavaScript" src="/(path wher is place the Ux)/Ext.ux.Notification.js"></script>

Can you post a segment of code where you use the Notification Ux?

when I use it I follow this way:


//simpli Notify
var notify = new Ext.ux.Notification({
title: "My title",
html: "Notify Message",
autoDestroy: true,
hideDelay: 1500
});
notify.show( document );

// notify with sound effect
var notify = new Ext.ux.Notification({
title: "My title",
html: "Notify Message",
autoDestroy: true,
hideDelay: 5000
listeners: {
'beforerender': function(){
Sound.enable();
Sound.play('/sounds/notify.wav');
Sound.disable();
}
}
});
notify.show(document);

dizzyd
30 Jul 2009, 5:26 AM
I have also noticed the persistent shadow, mainly when opening/closing the window quickly (under 1 second) if its displayed for a few seconds its fine, here is a snipit:



objSelf.msgWin = new Ext.ux.window.MessageWindow({
title:'there is work to be done',
html: 'working...',
plain: true,
autoHeight: true,
autoWidth: true,
shiftHeader: true,
baseCls: 'x-box',
clip: 'bottom',
autoHide: false,
iconCls: ''
}).show(Ext.getDoc());

hope this helps.
Browser/os/ext details as per my previous post, I dont use many extensions to ff appart from firebug and noscript.

The Noitification window stay open for 1500 ms ( a,5 seconds), but the shadow persist (I hate it :s)


i had the problem with toast window like this in EXT2.0 but that is problem in browser configuration. i had an add-on any color in firefox when i removed that and tried the toast window worked correctly but for your case i am not ale find the reason for your problem sorry /:) when you got it solved kindly let me know what was the actual problem in toast window


santhosh_chennai, I try this Example Page
http://www.efattal.fr/extjs/examples/toastwindow/
in my browsers, and all works fine, but this page use Extjs 2.2, in my application ( Extjs 3.0.0 ) I have the permanent shadow....
other ideas?

dizzyd
30 Jul 2009, 7:18 AM
[SOLVED]
I've do a svn checkout, buil Extjs and put it in my application..
Everything works Fine, and the damned shadow is vanished. =D>=D>=D>

stefan.riedel-seifert
11 Sep 2009, 4:14 AM
Hello,

nice plugin, but when resizing browser window, the notifications remain in their old position.

Best regards, Stefan

tobiu
15 Dec 2009, 12:45 PM
@dizzyd: i am using firefox3.5.5 and ext-3.0.3 and still having the shadow.

does anybody know, why the div containing the shadow does not get moved by ghost or slideOut?

kind regards,
tobiu

ThorstenSuckow
5 Jan 2010, 5:29 PM
@dizzyd: i am using firefox3.5.5 and ext-3.0.3 and still having the shadow.

does anybody know, why the div containing the shadow does not get moved by ghost or slideOut?

kind regards,
tobiu

If you are still usingToastWindow instead of the new component, you can use this override. It hides the shadow before the animation starts which seems to be necessary since the shadow and the window do not share the same animated container (i.e. the window el is animated, which does not hold the shadow).

I do not remember the behavior in Ext 2.2 and do not know if Ext 2.2 automatically did hide the shadow before the animation started - however, this makes for a better effect than the shadow remaining until the window's destroy method gets called ;)



animHide: function(){
Ext.ux.ToastWindowMgr.positions.remove(this.pos);

this.el.disableShadow();

this.el.ghost("b", {
duration: 1,
remove: true,
scope: this,
callback: this.destroy
});
}

TopKatz
7 Jan 2010, 7:27 AM
anyone have a fix for notification and the shadow for 3.x. I thought I had it nailed but it still has issues.

EDIT - DOH - that fix works for notification also!

Nice work!

Stju
13 Feb 2010, 2:07 AM
Using the latest revision (3.1.1) this component suffers the same problem with shadow! Someone probably can fill in a bugreport..

sergio.berlotto
16 Feb 2010, 1:16 PM
Using ExtJS 3.1.1 not works fine, the shadow not disapears...

Stju
28 Feb 2010, 10:56 PM
Don't blame, there is no shadow, but works just as intended :">


Ext.namespace("Ext.ux");
Ext.ux.NotificationMgr = {
positions: []
};
Ext.ux.Notification = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'x-icon-information',
cls: 'x-notification',
width: 200,
autoHeight: true,
plain: false,
draggable: false,
shadow:false,
bodyStyle: 'text-align:center'
});
if(this.autoDestroy) {
this.task = new Ext.util.DelayedTask(this.hide, this);
} else {
this.closable = true;
}
Ext.ux.Notification.superclass.initComponent.apply(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onDestroy: function(){
Ext.ux.NotificationMgr.positions.remove(this.pos);
Ext.ux.Notification.superclass.onDestroy.call(this);
},
cancelHiding: function(){
this.addClass('fixed');
if(this.autoDestroy) {
this.task.cancel();
}
},
afterShow: function(){
Ext.ux.Notification.superclass.afterShow.call(this);
Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
if(this.autoDestroy) {
this.task.delay(this.hideDelay || 5000);
}
},
animShow: function(){
this.pos = 0;
while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
this.pos++;
Ext.ux.NotificationMgr.positions.push(this.pos);
this.setSize(200,100);
this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
this.el.ghost("b", {
duration: 1,
remove: false,
callback : function () {
Ext.ux.NotificationMgr.positions.remove(this.pos);
this.destroy();
}.createDelegate(this)

});
},
focus: Ext.emptyFn
});
Use it without included protoculus library , save space, use mp3, not wav..


function show_info(typeCode, titleHtml, bodyHtml){
//type 1 - error
//type 2 - info
var headerIcon = (typeCode == 'error') ? 'ico-exclamation' : 'ico-info' ;
new Ext.ux.Notification({
iconCls: headerIcon,
title: titleHtml,
html: bodyHtml,
autoDestroy: true,
hideDelay: 1800,
listeners: {
'beforerender': function(){
Ext.ux.Sound.play('ext.ux2/Notification/notify.mp3');
}
}
}).show(document);
}

MoimHossain
24 Jun 2010, 5:40 AM
Guys, this is indeed a nice work. However, when I tried to use this into my application, I find that the shadows are not removed when the notification closes (I am using autohide mode) in IE7.

I am using a layout exactly like the the Ext API documentation program (a viewport into the middle, a tab control with a first tab that renders a html page). And for the notification I am showing it as

show(document)

so, it's using the document as the host. Look at the image below.

http://i423.photobucket.com/albums/pp315/MoimHossain/Problem.png

As you can see the botton -right portion of my application, I have a status bar and the white portion is the html page inside the first tab page. And this is what happens after the notification gets hidden.

I am using all the CSS that I found into the online demo of this cool component. Still it doesn't work for me.

Can any body help me please?

tobiu
24 Jun 2010, 6:19 AM
open your eyes MoimHossain,

thorsten already posted a fix:
http://www.sencha.com/forum/showthread.php?32365-Ext.ux.Notification&p=424563#post424563

with kind regards
tobiu

MoimHossain
24 Jun 2010, 7:20 AM
open your eyes MoimHossain,

thorsten already posted a fix:
http://www.sencha.com/forum/showthread.php?32365-Ext.ux.Notification&p=424563#post424563

with kind regards
tobiu

Thanks Buddy, I just opened my eyes and got that nice fix. Thanks again for your reply :) Cheers

evertonce
28 Aug 2010, 2:27 PM
tanks effatal very good job!!!

Simonici
13 Sep 2010, 7:41 AM
Does anyone know why the toast window demo has a lighter color at the top of the window and the Notification has not. I am using Notification with Ext 3.2.
Is this a Ext.Window property?


22378

jsakalos
13 Sep 2010, 12:30 PM
It's probably different sprite(s).

tobiu
13 Sep 2010, 8:45 PM
if you mean the toast-demo at the first page of this topic, thats with ext 2.x :)
the css and images have changed quite a lot.

oulenspiegel
16 Jan 2011, 7:29 AM
This is a version with my modifications. It handles such an issues:

1. Wrong y positions in the case of multiple notifications (notifications overlapping)
2. Wrong x notifications positions (at least at Chrome) when after the first notification y-scrollbar appears which results in body element resize
3. y-scrollbar appearance when using notification for the document w/o y-scrollbar.



Ext.namespace("Ext.ux");

Ext.ux.NotificationMgr = {
notifications: [],
originalBodyOverflowY: null
};

Ext.ux.Notification = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'x-icon-information',
cls: 'x-notification',
width: 200,
autoHeight: true,
plain: false,
draggable: false,
shadow:false,
bodyStyle: 'text-align:center'
});
if(this.autoDestroy) {
this.task = new Ext.util.DelayedTask(this.hide, this);
} else {
this.closable = true;
}
Ext.ux.Notification.superclass.initComponent.apply(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onDestroy: function(){
Ext.ux.NotificationMgr.notifications.remove(this);
Ext.ux.Notification.superclass.onDestroy.call(this);
},
cancelHiding: function(){
this.addClass('fixed');
if(this.autoDestroy) {
this.task.cancel();
}
},
afterShow: function(){
Ext.ux.Notification.superclass.afterShow.call(this);
Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
if(this.autoDestroy) {
this.task.delay(this.hideDelay || 5000);
}
},
animShow: function() {
// save original body overflowY
if (Ext.ux.NotificationMgr.originalBodyOverflowY == null)
{
Ext.ux.NotificationMgr.originalBodyOverflowY = document.body.style.overflowY;
}

// if the body haven't horizontal scrollbar it should not appear
if (document.body.clientHeight == document.body.scrollHeight)
{
document.body.style.overflowY = 'hidden';
}

this.setSize(200, 100);
pos = -5;

for (var i = 0; i < Ext.ux.NotificationMgr.notifications.length; i++)
{
pos -= Ext.ux.NotificationMgr.notifications[i].getSize().height + 15;
}

Ext.ux.NotificationMgr.notifications.push(this);

this.el.alignTo(document.body, "br-br", [ -20, pos ]);

this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
this.el.ghost("b", {
duration: 1,
remove: false,
callback : function () {
Ext.ux.NotificationMgr.notifications.remove(this);

if (Ext.ux.NotificationMgr.notifications.length == 0)
{
document.body.style.overflowY = Ext.ux.NotificationMgr.originalBodyOverflowY;
}

this.destroy();
}.createDelegate(this)

});
},
focus: Ext.emptyFn
});

Bodom78
3 Feb 2011, 4:20 PM
Thanks oulenspiegel,

I'm about to use notifications in another project and will test out your modified version to see if there are any issues.

nmcbride
20 Mar 2011, 10:00 PM
This is a version with my modifications. It handles such an issues:

1. Wrong y positions in the case of multiple notifications (notifications overlapping)
2. Wrong x notifications positions (at least at Chrome) when after the first notification y-scrollbar appears which results in body element resize
3. y-scrollbar appearance when using notification for the document w/o y-scrollbar.



Ext.namespace("Ext.ux");

Ext.ux.NotificationMgr = {
notifications: [],
originalBodyOverflowY: null
};

Ext.ux.Notification = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'x-icon-information',
cls: 'x-notification',
width: 200,
autoHeight: true,
plain: false,
draggable: false,
shadow:false,
bodyStyle: 'text-align:center'
});
if(this.autoDestroy) {
this.task = new Ext.util.DelayedTask(this.hide, this);
} else {
this.closable = true;
}
Ext.ux.Notification.superclass.initComponent.apply(this);
},
setMessage: function(msg){
this.body.update(msg);
},
setTitle: function(title, iconCls){
Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
},
onDestroy: function(){
Ext.ux.NotificationMgr.notifications.remove(this);
Ext.ux.Notification.superclass.onDestroy.call(this);
},
cancelHiding: function(){
this.addClass('fixed');
if(this.autoDestroy) {
this.task.cancel();
}
},
afterShow: function(){
Ext.ux.Notification.superclass.afterShow.call(this);
Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
if(this.autoDestroy) {
this.task.delay(this.hideDelay || 5000);
}
},
animShow: function() {
// save original body overflowY
if (Ext.ux.NotificationMgr.originalBodyOverflowY == null)
{
Ext.ux.NotificationMgr.originalBodyOverflowY = document.body.style.overflowY;
}

// if the body haven't horizontal scrollbar it should not appear
if (document.body.clientHeight == document.body.scrollHeight)
{
document.body.style.overflowY = 'hidden';
}

this.setSize(200, 100);
pos = -5;

for (var i = 0; i < Ext.ux.NotificationMgr.notifications.length; i++)
{
pos -= Ext.ux.NotificationMgr.notifications[i].getSize().height + 15;
}

Ext.ux.NotificationMgr.notifications.push(this);

this.el.alignTo(document.body, "br-br", [ -20, pos ]);

this.el.slideIn('b', {
duration: 1,
callback: this.afterShow,
scope: this
});
},
animHide: function(){
this.el.ghost("b", {
duration: 1,
remove: false,
callback : function () {
Ext.ux.NotificationMgr.notifications.remove(this);

if (Ext.ux.NotificationMgr.notifications.length == 0)
{
document.body.style.overflowY = Ext.ux.NotificationMgr.originalBodyOverflowY;
}

this.destroy();
}.createDelegate(this)

});
},
focus: Ext.emptyFn
});


The problem with this is that if you are on a page with a vertical scroll bar, when the notification pops up it removes it so the whole page shifts to the right which is very noticeable.

HarryC
5 Jul 2011, 5:59 AM
I'm not sure what I'm doing wrong with this plugin, but whenever I use it I get multiple notifications. Say I have a button that when pressed shows a notification. It works the first time, but when you press it a second time you get 2 notifications. A third time, 3; and so on. It looks bad and gets slow.

Anyone else have this and know what I'm doing wrong?

(I'm using Ext 3.3.1, but I've always had this issue with the plugin. Basically stopped using it months ago because of this, but now I really would like to use it).

white-hat
1 Aug 2011, 11:26 AM
Good evening,

i started using Ext4 a few weeks before and today i tried to play around with notifications.
If i start it i receive an error (IE):


Meldung: Objekt expected
Zeile: 31
Zeichen: 10
Code: 0
URI: xyz.de/extComm/webDesk/sandbox/sandbox.js



Ext4.onReady(function() {


var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'center',
title: 'Toast Windows',
items: [
{
xtype: 'button',
text: 'Eject new toast window',
style: 'margin: 20px',
listeners: {
click: function(){
---> Thats line 31 new Ext.ux.Notification({


...





I have included
protoculous-packer.js
Ext.ux.Notification.js

so i dont think thats the issue.
Did i forget something?

Sorry for my silly questions but i tried to fix the whole day.

Best regards from germany
Bo

talha06
25 Aug 2011, 11:30 PM
very useful plugin, thanks for sharing dear friend.. =D> I just want to learn how can I solve "spot" problem after the window is hidden.. the spot that's around of the window stays.. By the way I'm using Ext 3.x.. Can someone help me? I attached the pic of this situation..

Thanks in advance..
With regards..
2770527706

eirik.lorentsen
30 Aug 2011, 7:40 AM
I have ported / rewritten a 4.x version of this extension that can be found here:
http://www.sencha.com/forum/showthread.php?t=145503

I placed it in the Ext.ux.window.Notification namespace.
And it has some improvements from the old version:


Multiple managers and notifications stacks
The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
Both x and y axis can be used. Notifications can slide in sideways.
When a notification is destroyed any notifications above it slide down automatically.
Easy customization of css, animations, delays, spacings/padding etc.

Marc.Ziman
21 Oct 2011, 5:26 AM
I'm using Ext 3.3.1. When the notification starts to hide, its sides disappear though the corners are intact. This happens on IE8, my target browser a choice over which I have no control. Firefox is ok. Does anyone have any suggestions? Thanks.

Grolubao
22 Nov 2011, 4:33 PM
Hi Erik,
Love the styling that you did. I tried to apply it to a normal window and it doesn't work properly... Can you provide me the styling that you used to be applied instead to ExtJS 3.x




.ux-notification-light .x-window-header { background-color: transparent;}body .ux-notification-light { background-color: white; background-image: url('images/fader.png');}.ux-notification-light .x-window-body { text-align: center; padding: 15px 5px 18px 5px; width: 200px; background-color: transparent; border: 0px solid white;}


I have ported / rewritten a 4.x version of this extension that can be found here:
http://www.sencha.com/forum/showthread.php?t=145503

I placed it in the Ext.ux.window.Notification namespace.
And it has some improvements from the old version:

Multiple managers and notifications stacks
The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
Both x and y axis can be used. Notifications can slide in sideways.
When a notification is destroyed any notifications above it slide down automatically.
Easy customization of css, animations, delays, spacings/padding etc.

eirik.lorentsen
25 Nov 2011, 7:50 AM
Grolubao:
I'm sorry but I haven't applied the styling to any 3.x code.
But if you set the config of the window to:
border: false,
preventHeader: true
and add a cls where you use the fader image as background then you should be well on your way.
Especially if you don't care about older (<IE9) browsers.

gurunath
25 Jul 2012, 12:49 AM
hi all I tried this code on 4.1 but dont know how mywindow displays at centre please help me out,
one more thing when animShow method is called?
I puted an alert but it never displays