PDA

View Full Version : Ext.ux.MessageWindow



mjlecomte
24 Sep 2008, 10:06 AM
Influenced by the original ToastWindow/Notification Class by Edouard Fattal (http://extjs.com/forum/showthread.php?t=32365)

Class: Ext.ux.window.MessageWindow
Docs: Ext.ux.window.MessageWindow (http://extjs-ux.org/docs/index.html?class=Ext.ux.window.MessageWindow)
Demo: here (http://extjs-ux.org/repo/authors/mjlecomte/trunk/Ext/ux/window/msgWindow.html)

Docs have additional description of features etc.

http://extjs-ux.org/repo/authors/mjlecomte/trunk/Ext/ux/window/screenshot.PNG


Known Issues/Bugs:

Repeating message window is draggable, however need to implement (optionally) locking the y axis, and updating the x position after drag so new messages could (optionally) show up in new location.
Positioning of additional MessageWindow instances when the height of each MessageWindow varies needs attention. The position calculation will need to examine the heights of all items for that MessageWindow Manager. A little complicated depending on if prior Message Windows have been removed from the Manager where new ones should show up. Would need to do something more complicated like check the space available to see if the new MessageWindow would bump into or overlap current MessageWindows.


v0.08

togglePinState missing event fixed.


v0.02

IE bug for repeating message window appears to be gone.


v0.01 - initial

galdaka
24 Sep 2008, 11:40 AM
Hi,

Multiple errors in IE.

Thanks in advance,

mjlecomte
25 Sep 2008, 5:41 PM
Still alpha, but the IE errors appear to be gone now.

galdaka
25 Sep 2008, 10:55 PM
Still alpha, but the IE errors appear to be gone now.

Oh Sorry,

Why dont you make this modifications throught addons to the original component?


Greetings,

mjlecomte
26 Sep 2008, 3:13 AM
What do you mean?

zombeerose
7 Nov 2008, 1:45 PM
Any reason why there are two onRender methods defined? Also, is there a specific approach to get the 'closable' option to work?

Thanks!

zombeerose
7 Nov 2008, 2:19 PM
I found the CSS that was hiding the close button.

zombeerose
7 Nov 2008, 3:08 PM
Just a suggestion...
How about adding an anchor config that could get used by the slideIn and default cases to avoid the fixed "b" anchor? Or maybe a showFx config so other options can get changed.

Thx

mjlecomte
7 Nov 2008, 5:35 PM
Just a suggestion...
How about adding an anchor config that could get used by the slideIn and default cases to avoid the fixed "b" anchor? Or maybe a showFx config so other options can get changed.

Thx

I still have some doc cleanups to do as you noticed. Only the second onRender is effective since it's overridden.

If you go to the docs page linked in the first post you'll notice that your showFx config was on the "to do" list, with a couple others outstanding. As you may have noticed could basically just provide similar configs that the hide method has as I recall.

I don't know what you mean by the css.

If you implement the changes you want or need please send them along and I'll incorporate them into the ux.

watrboy00
8 Nov 2008, 7:20 PM
Type 'toast' like the message says. On a popup window click the pin tool then click the inner message of the window and you get an error in FF2


event is not defined
togglePinState()MessageWindow.js (line 571)
handleClick(Object browserEvent=Event mousemove button=0)MessageWindow.js (line 669)
h(Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 1613)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)

chrome://firebug/content/blank.gif this.handleUnpin(event, this.tools.pin, this);

mjlecomte
8 Nov 2008, 8:59 PM
Thanks, I checked in the fix to svn. Demo is already working, but the svn repo has a 1 hour delay for the source code I think (you can get source directly from my directory right now though).

jsakalos
12 Feb 2009, 6:13 AM
MJ, what's license?

mjlecomte
12 Feb 2009, 6:26 AM
MJ, what's license?

I don't care, use http://en.wikipedia.org/wiki/WTFPL unless you'd like to propose something else.

mjlecomte
12 Feb 2009, 6:28 AM
Actually license is shown here:
http://extjs-ux.org/docs/index.html?class=Ext.ux.window.MessageWindow

If that doesn't give you freedom you need to use as you want, let me know so I can change it.

jsakalos
12 Feb 2009, 6:52 AM
Good. So it looks like I could use it. Any idea about a stable release?

This is alpha version so some features are going to be added? (BTW, I don't need anything more. ;) )

mjlecomte
12 Feb 2009, 7:09 AM
My first release was dubbed 'alpha' status, there's been little feedback since then so I haven't done anything to add features or change the status.

jsakalos
21 Feb 2009, 1:26 PM
MJ, could you please to make a brief review of MessageWindow and change its status to stable if you won't find any problems? Maybe I'm too conservative ;) but I hate to use alpha versions.

jsakalos
21 Feb 2009, 1:40 PM
... more: I would appreciate if there would be some defaults like: position=bottom-right, animation=slide-in from bottom + fade-out to disappear, icon=icon-info (or any other reasonable name) so if I would get reasonable appearance specifying only title and message.

I'd also like if there would be a singleton that would take care about window creation so I'd only need to write only sth like:


MessageWindow.show(message, title); // title optional, defaulting to "Information"
// or, in the case of changing appearance/behavior
MessageWindow.show(config); // with full config object
in the user space.

Last, a configurable sound effect please.

Thanks,
Saki

jsakalos
19 Mar 2009, 2:34 PM
MJ,

I was trying to run my examples against upcoming Ext 3.0 (today's svn) and this example (http://examples.localhost/?ex=itemclick) that uses MessageWindow spits some errors to me.

It is not urgent but could you please take a look what's that?

Note: On-line version of examples is still on 2.2.1.

http://extjs.eu/msgwin-error.png

mjlecomte
20 Mar 2009, 5:04 AM
http://extjs.com/forum/showthread.php?p=306267#post306267

jsakalos
20 Mar 2009, 5:05 AM
Thanks you very much.

mjlecomte
20 Mar 2009, 11:43 AM
Fixed. http://extjs.com/forum/showthread.php?p=306524#post306524

jsakalos
20 Mar 2009, 11:45 AM
Super, thanks again.

lkasdorf
24 Mar 2009, 7:10 PM
I'm really sorry to hassle you nice folks, but I have been searching all throughout this thread and I cannot locate the URL repository for MessageWindow.

I have tortoiseSVN installed. I just need to know what to put into the URL of repository window. I reallyu want to get the code and play with it!

Thanks!

mjlecomte
24 Mar 2009, 7:22 PM
Why don't you ask that in the thread for the ux repo in my signature? I have "a" way that I'm doing it, but I don't know that it's the recommended way, as I simply check out the entire repository. But I also have separate working copies of a few select directories as well.

I think you might be able to just check out the particular extension you are looking for also, so you can monitor updates for that ux more easily. Then you could get something like CommitMonitor and have it automatically check for updates for you.

The repo was originally set up to automatically update every hour on the hour. I don't know if the repo moderator has changed that practice or not. If it is still that way I don't know how the CommitMonitor would work.

Again, the place to ask is the repo thread. You can quote this post in that other thread if you like.

lkasdorf
24 Mar 2009, 7:26 PM
Why don't you ask that in the thread for the ux repo in my signature? I have "a" way that I'm doing it, but I don't know that it's the recommended way, as I simply check out the entire repository. But I also have separate working copies of a few select directories as well.

I think you might be able to just check out the particular extension you are looking for also, so you can monitor updates for that ux more easily. Then you could get something like CommitMonitor and have it automatically check for updates for you.

The repo was originally set up to automatically update every hour on the hour. I don't know if the repo moderator has changed that practice or not. If it is still that way I don't know how the CommitMonitor would work.

Again, the place to ask is the repo thread. You can quote this post in that other thread if you like.

Ok, I'll do that. But all I want to do is get hold of the code- there must be a simple way to do so? I'm just not understanding yet how we are supposed to grab code.

Thanks for creating messagewindow and for all your excellent efforts on grid documentation, by the way.

mjlecomte
24 Mar 2009, 9:34 PM
Well, for that do as the first post in the ux repo thread says, and check out from:


For downloading - create a local directory for your copy and checkout to it the following URL:
http://extjs-ux.org/repo/trunk

Or go to the demo page and do save as on the page, etc.

andycramb
10 Apr 2009, 12:55 AM
hi MJ

I was looking to use your extension to display to users, notifications of successful actions
I would like to display these notifications always at the top centre of the screen, this would be pinned to this area even if the browser is resized
I am not sure if your extension does this out the box as I cannot see a config option that would handle this but I do see that one of the features is:

Message windows may be bound to any element through configurationI was thinking that I could bind it to the viewport(cannot see how to do this?) and I wasn't sure if I could also specify that I want it to be placed top centre
When I looked at the example(example 1 - "Bottom corner unpinned") I could not work out how you got it positioned to the bottom right of the screen by default?
Any help is much appreciated
Andy

mjlecomte
10 Apr 2009, 7:57 AM
Hi Andy,

Check the demo, I just updated it. I tweaked the class to allow a config for that. Grab the update directly from my ux folder, otherwise I think you have to wait an hour for it to propogate to the main svn repo trunk.

Take note to look at some of the other examples how you might offset the notification from the base point. For example, currently the new example is aligned top middle, but you could also offset it some direction (say left/right based on something).

andycramb
10 Apr 2009, 8:04 AM
Thanks MJ

I will give it a try over the weekend.

Andy

andycramb
10 Apr 2009, 12:58 PM
Nice one that worked a treat on my first attempt
Thank you
MJ does it attach to the viewport by default if you do not specify the 'el' property of the origin config?
Have you just updated the msgWindow code as I can see no reference to the origin config in the docs?

Andy

mjlecomte
10 Apr 2009, 2:24 PM
Sorry, I don't understand the question/confusion. The docs haven't changed, I'm not saying they don't need to. But I think it indicates it defaults to putting the message in document.body unless explicitly stated.

andycramb
10 Apr 2009, 2:41 PM
Sorry my fault I seen one of your comments(highlighted in bold below) in the demo code and can see it now
I was looking at the API(http://extjs-ux.org/docs/) for Ext.ux.window.MessageWindow and could not find the origin property for it.
Hope that makes sense. Sorry for any confusion



origin: {
//get window's Ext.element:
el: Ext.get('myWin'), //element to align to (defaults to document)
pos: "b-t",//position to align to (see {@link Ext.Element#alignTo} for more details defaults to "br-br").
offX: 0.25*Ext.get('myWin').getWidth(), //amount to offset horizontally (-20 by default)
offY: 0, //amount to offset vertically (-20 by default)
spaY: 5 //vertical spacing between adjacent messages

},

galdaka
10 Apr 2009, 11:17 PM
Hi again,

Multiple errors in IE6.

Excellent work!!

Greetings,

mjlecomte
11 Apr 2009, 5:17 AM
Oh, I see now. I don't know why this doc isn't being generated in the API Docs:



/**
* @cfg {Object} origin
* Config object for the message origin with the following sample of default properties:
* <b>Example</b>:
* <pre><code>
* //configure a different origin than the default bottom right corner of the window:
* origin: {
* //get window's Ext.element:
* el: Ext.get('northRegion'), //element to align to (defaults to document)
* increment: true, // default is to increment position of subsequent messages
* pos: "bl-bl", // position to align to (see {@link Ext.Element#alignTo} for more details defaults to "br-br").
* offX: 10, // amount to offset horizontally (-20 by default)
* offY: 0 // amount to offset vertically (-20 by default)
* spaY: 5 // vertical spacing between adjacent messages (5 by default)
* },
* </code></pre>
*/

dejohns2
15 Apr 2009, 2:22 PM
I noticed a problem when unpinning (closing the message window). This only occurs if you unpin a message that was displayed after a previous message. The default for a window's close event destroys itself which then causes the previous message window to have focus. Then when the this.destroy() happens it causes the previous message window to be destroyed in addition to the original message window. I do believe the this.destory() call should be removed.



this.on({
hide: {
scope: this,
fn: function () {
if (this.autoDestroy) {
if (this.fireEvent("beforeclose", this) !== false) {
this.fireEvent('close', this);
//this.destroy();
}
}
}
},
});

gotcha
20 Apr 2009, 12:23 PM
Thanks for the tool!

I have implemented it, but after going through doc, code and testing, believe there is a bug in the tool - config 'pinOnClick' doesn't work.

When 'pinOnClick:false' so that the pin/unpin tool is hidden, it doesn't work. The pin/unpin still displays.

'help: false' works as it should - the help button is hidden.

Also, when I implemented it, noticed that IE displays the following error
"Line :60
Error: 'null' is null or not an object
"
and using MS script debugger, it highlights/displays the following line in ext-all.js

"C.insertBefore(D.dom,this.dom)"

I use the following code


msg: function (title, format, dur) {
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
new Ext.ux.window.MessageWindow({
autoDestroy: true,//default = true
autoHeight: true,
autoHide: true,//default = true
help: false,
pinOnClick : false,
hideFx: {
delay: 1500,
//duration: 0.25,
mode: 'standard',//null,'standard','custom',or default ghost
useProxy: false //default is false to hide window instead
},
html: createBox (title, s) ,
showFx: {
delay: 0,
//duration: 0.5, //defaults to 1 second
mode: 'standard',//null,'standard','custom',or default ghost
useProxy: false //default is false to hide window instead
},
width: 250 //optional (can also set minWidth which = 200 by default)
}).show(Ext.getDoc());
},


Please advise.

mjlecomte
20 Apr 2009, 3:48 PM
I noticed a problem when unpinning
Grab an update from svn, I think this is fixed.

mjlecomte
20 Apr 2009, 3:51 PM
believe there is a bug in the tool - config 'pinOnClick' doesn't work.

This should be fixed with the latest in svn.


Also, when I implemented it, noticed that IE displays the following error
...
I use the following code


...
html: createBox (title, s) ,


I don't know what createBox() is. Do you get the error if you just put html text? html:'foo' for example.

mjlecomte
20 Apr 2009, 3:53 PM
I removed autoDestroy and replaced it with hideAction. So it works with the standard actions a little better now I think. Quite similar to closeAction in essence.

Anyway, note the change. hideAction defaults to close(), so it will by default destroy the window when it hides, unless you specify closeAction to be other than the default of course.

gotcha
21 Apr 2009, 7:10 AM
This should be fixed with the latest in svn.

I don't know what createBox() is. Do you get the error if you just put html text? html:'foo' for example.

Hi.. thanks for the update.

I tried your above example -
html:'foo'

IE spewed the same error. Please advise.

FYI -
1. My test screen uses a viewport with north, west, center and east regions - a panel in north and grids in west, center and east regions. The message box appears from the bottom right of the screen over the grid in the east region.
2. createbox is just a function that returns a DIV

mjlecomte
21 Apr 2009, 10:43 AM
You didn't say what version of IE, but I can't reproduce the problem using the example below on IE7 or FF3.0.8.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext.ux.MessageWindow</title>

<!-- Ext Styles -->
<link rel="stylesheet" type="text/css" href="http://localhost/ext/v2.2/resources/css/ext-all.css"/>

<!-- Common Styles for the examples -->
<!--
examples.css affects the padding for .x-notification
<link rel="stylesheet" type="text/css" href="../../examples/shared/examples.css" />
-->

<!-- CSS Stylesheet -->
<style type="text/css">

body {overflow: hidden;}
.x-icon-error{background-image:url(exclamation.gif) ! important;}
.x-icon-information{background-image:url(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}
.msg-over{
/* color:#789030 !important; */
color:#913049 !important;
}
</style>
<!-- / CSS Stylesheet -->

<!-- Base Adapter -->
<script type="text/javascript" src="http://localhost/ext/v2.2/adapter/ext/ext-base.js"></script>

<!-- Ext -->
<script type="text/javascript" src="http://localhost/ext/v2.2/ext-all.js"></script>

<script type="text/javascript" src="MessageWindow.js"></script>

<!-- Page Specific -->

<script type="text/javascript">
Ext.onReady(function()
{
//initialize QuickTips so the tool qtips work:
Ext.QuickTips.init();

var showMessage = function(){
var mw = new Ext.ux.window.MessageWindow({
//autoDestroy: true,//default = true
autoHeight: true,
autoHide: true,//default = true
help: false,
pinOnClick: false,
title: 'Message Window Test',
hideFx: {
delay: 1500,
//duration: 0.25,
mode: 'standard',//null,'standard','custom',or default ghost
useProxy: false //default is false to hide window instead
},
html: 'foo',
showFx: {
delay: 0,
//duration: 0.5, //defaults to 1 second
mode: 'standard',//null,'standard','custom',or default ghost
useProxy: false //default is false to hide window instead
},
width: 250 //optional (can also set minWidth which = 200 by default)
}).show(Ext.getDoc());
};

new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: 'North',
split:true,
height: 30,
minSize: 10,
maxSize: 90
},{
region: 'center',
title: 'Center',
html: 'Center'
}],
listeners: {
afterlayout: {
fn: showMessage
}
}
});

});
</script>
</head>

<body></body>
</html>

gotcha
21 Apr 2009, 11:35 AM
You didn't say what version of IE, but I can't reproduce the problem using the example below on IE7 or FF3.0.8.


Sorry about that - I am using IE 6

It fails in IE 6.0.2900. The message box does show up, but as it tries to 'hide', IE throws the error - hope this sheds some light for you.

FF 3.0.8 - works fine.

Per company policy, we can't use IE7 yet.

Thnx.

mjlecomte
21 Apr 2009, 12:13 PM
I don't have IE6, someone else will need to debug that problem.

franck34
4 May 2009, 4:00 AM
Excellent extension.

Btw, i saw a user looking for close little icon at top/right of the window. Should be great to add closable:true/false config option ;)

Perhaps i'll provide a patch, not sure.

Cheers

mjlecomte
4 May 2009, 4:36 AM
Excellent extension.

Btw, i saw a user looking for close little icon at top/right of the window. Should be great to add closable:true/false config option ;)

Perhaps i'll provide a patch, not sure.

Cheers

This class extends Window so it's already there, no? See the screenshot from the first post (http://extjs.com/forum/showthread.php?p=228960#post228960), it shows the little "x" in one message window configured in such a way.

franck34
4 May 2009, 7:32 AM
If i said that it's because i've tested closable:true, and no changed ;)

In the screenshot, it's a simple window, it's not a windowmessage.

mjlecomte
4 May 2009, 11:13 AM
If i said that it's because i've tested closable:true, and no changed ;)

In the screenshot, it's a simple window, it's not a windowmessage.

Alright, grab update from svn once it propagates. You can check the "Top Middle - Unpinned" in the demo right now to see the close button. In addition to a change in the extension class, you need to alter the css (see the head section of the html demo page). Updated a couple of the examples so both the pin and close tools both don't show up. I think it will work now either way. Give her a whirl and see how it goes.

stevemc
18 May 2009, 11:09 PM
Sorry about that - I am using IE 6

It fails in IE 6.0.2900. The message box does show up, but as it tries to 'hide', IE throws the error - hope this sheds some light for you.

FF 3.0.8 - works fine.

Per company policy, we can't use IE7 yet.

Thnx.

Have you tried setting shim:false? That seems to solve the problem in IE6.

Lloyd K
19 May 2009, 7:14 AM
What is the compatibility with 3.x? I have it working in 3.x however I copied your Example 2 and it fades down ok except for it shows the vertical scrollbar until it's gone?

mjlecomte
19 May 2009, 7:43 AM
What is the compatibility with 3.x? I have it working in 3.x however I copied your Example 2 and it fades down ok except for it shows the vertical scrollbar until it's gone?

I don't have such an occurrence after testing with IE8 and FF3 using Ext 3.x and WinXP. I do not have any custom css. You would need to post working showcase code for me to test against.

Lloyd K
19 May 2009, 7:56 AM
Here's the code I use:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="/ext22/resources/css/ext-all.css" />

<script type="text/javascript" src="/ext22/adapter/ext/ext-base.js"></script>

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

<script type="text/javascript" src="/extjs/ux/msgwin/msgwin.js"></script>

<script type="text/javascript">

var msgwin = new Ext.ux.window.MessageWindow({
title: "Firebug Warning",
autoDestroy: true,//default = true
autoHeight: true,
autoHide: true,//default = true
bodyStyle: "text-align: center;",
closable: false,
help: false,
html: 'This window is initially shown as pinned.<b>Message</b> window hide mode. The height can be left to autosize itself, you can explicitly state a height, or just use the minimum default height.',
iconCls: 'x-icon-error',
pinState: "pin",
showFx: {
duration: 0.25,
mode: "standard"
//useProxy: false //default is false to hide window instead
},
width: 250 //optional (can also set minWidth which = 200 by default)
});

msgwin.show(document.body);

</script>

</body>
</html>



It does it in FF2, Chrome, IE8

I lifted the code directly from the demo BUT it works fine there, the only difference is here I'm doing it direct and not with a viewport which incidently does hide the scrollbar issue :/

mjlecomte
19 May 2009, 8:01 AM
Here's the code I use:




<link rel="stylesheet" type="text/css" href="/ext22/resources/css/ext-all.css" />



I thought you were asking about Ext 3?

Lloyd K
19 May 2009, 8:03 AM
Sorry I changed it to Ext 2.x when I was having issues with 3.x and it still affected me in 2.x as well as 3.x. The point is the Viewport hides the scrollbar issue it seems, if I create a Viewport it all works nicely, if I don't I see scrollbars.

mjlecomte
19 May 2009, 8:51 AM
Sorry I changed it to Ext 2.x when I was having issues with 3.x and it still affected me in 2.x as well as 3.x. The point is the Viewport hides the scrollbar issue it seems, if I create a Viewport it all works nicely, if I don't I see scrollbars.

Ok, I see the scrollbars when there is no viewport.

This does not appear to be specific to this class though. Take a standard Ext.Window and move it to the bottom or right edge and you'll get those scrollbars.

One way to mitigate it is to use this on your page:


<style type="text/css">
body {overflow: hidden};
</style>


Otherwise, seems like the constrain algorithm Ext uses should possibly keep divs 1 px away from the edge.

Lloyd K
19 May 2009, 8:54 AM
OK that's better thanks, the next page has a viewport anyhow only this one is free floating so shouldn't be an issue going forward.

Ronhead
2 Jun 2009, 12:22 PM
thanks
work perfect ;) (IE6,7 & FF)

koko2589
2 Jun 2009, 12:41 PM
hi i have this its show the window when site load
i want to show the window evrey 5 minet
like advertisement, publicity commercials
idont wont the window show when site load i wont after 5 minute
tankyou



Ext.ux.ToastWindowMgr = {
positions: []
};
Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'information',
width: 200,
height: 130, shim:false,

autoDestroy:false ,
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(7000);
},
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,130);
this.el.alignTo(document, "br-br", [ -30, -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: 'הודעת מערכת',// closable: false,iconCls: 'information',

html : ' <p align="center"><BR>אתר דסקטופ בבניה ויהיה מוכן בימים הקרובים<p />'
, listeners: {
show: {
fn: function(){
this.body.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: "ffffff",
easing: 'easeOut',//'easeIn',
duration: 1
});
}
}
}, iconCls: 'information'
}).show(document);
});

i see this fancsion here http://www.digitalbucket.net/User/FileManager.aspx

mjlecomte
2 Jun 2009, 1:25 PM
The code you posted is not for this extension.

If you go to the demo I've posted there's an example of an updating banner toward the upper left of the page...updating north div.

koko2589
29 Jun 2009, 2:59 AM
hi i use this
hoe to put the window in center page?not
this.el.alignTo(document, "br-br", [ -30, -20-((this.getSize().height+10)*this.pos) ]); i try here bat its not center
http://itoto1.com/accordion.html


Ext.ux.ToastWindowMgr = {
positions: []
};
Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
initComponent: function(){
Ext.apply(this, {
iconCls: this.iconCls || 'information',
width: 200,
height: 130, shim:false,

autoDestroy:false ,
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(7000);
},
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,130);
this.el.alignTo(document, "br-br", [ -30, -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: 'הודעת מערכת',// closable: false,iconCls: 'information',

html : ' <p align="center"><BR>אתר דסקטופ בבניה ויהיה מוכן בימים הקרובים<p />'
, listeners: {
show: {
fn: function(){
this.body.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: "ffffff",
easing: 'easeOut',//'easeIn',
duration: 1
});
}
}
}, iconCls: 'information'
}).show(document);
});

mystix
29 Jun 2009, 4:09 AM
@koko2589,


The code you posted is not for this extension.

http://content.screencast.com/users/mystix/folders/Jing/media/4f056b34-0b58-47ba-b05e-e24d1af07031/00000004.png

Lloyd K
24 Jul 2009, 6:44 AM
Are there any know issues with Firefox 3.5? I display the popup fine but when it goes it's shadow lingers somewhat then disappears?

mjlecomte
24 Jul 2009, 7:50 AM
Are there any know issues with Firefox 3.5? I display the popup fine but when it goes it's shadow lingers somewhat then disappears?

Hmmm. Looks like something with svn version. I don't see that problem with 3.0.0. Do you confirm?

salihgedik
24 Jul 2009, 8:00 AM
Lookin great i will test it :)

Lloyd K
27 Jul 2009, 2:43 AM
It happens with 3.0.10 too that I can see :/

admiralato
3 Aug 2009, 6:40 PM
hi i was looking for this kind of feature for our project, but i'd like to know if there's a way for me to add buttons like YES, NO, and CANCEL buttons. I was thinking of converting our message dialogs with your extension (if it could be done).

hope you got my idea...

lemme know how it could be done, thanks!

mjlecomte
3 Aug 2009, 7:45 PM
This extension just extends Window, so sure.

admiralato
6 Aug 2009, 1:23 AM
i was able to do it! thanks! but i'm having problems running the project (or even your online demo) after i close/hide the toast windows...it pops up a script error.

did this occur with you or to others who have used this extension? how do i fix it?

thanks in advance!

mjlecomte
6 Aug 2009, 5:39 AM
Generally it's helpful to post details of the error, when it occurs, what conditions, browser, stacktrace, etc.

admiralato
7 Aug 2009, 1:10 AM
I am using EXTJS 2.0. The error occurs when I close a toast window, I used IE 8's built-in debugger and it really doesn't tell much about the error, it just tells me that the error occurred at this location

ERROR: 'null' is null or not an object
LOCATION: ext-all.js, line 60 character 1115

in which the variable C is NULL.

And is there a way for me to transfer the message windows at the lower left side?

thanks!

mjlecomte
7 Aug 2009, 1:37 AM
http://extjs.com/learn/Ext_FAQ_Debugging
http://extjs.com/learn/Ext_FAQ_Debugging#Include_uncompressed_source_files

Unless you produce error with online demo I'm guessing you have a bug in your code.

mjlecomte
7 Aug 2009, 1:39 AM
For positioning see http://extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Element&member=alignTo

admiralato
7 Aug 2009, 1:46 AM
i was able to figure out how to transfer the message window to the bottom left corner by using "bl-bl"...

thought i still have weird errors when i run my project in IE. hope you could help me out.

admiralato
7 Aug 2009, 1:48 AM
http://extjs.com/learn/Ext_FAQ_Debugging
http://extjs.com/learn/Ext_FAQ_Debugging#Include_uncompressed_source_files

Unless you produce error with online demo I'm guessing you have a bug in your code.


yeah maybe i do, :-? i'm having a rough time figuring it where coz the debugger in IE doesn't really tell much

admiralato
7 Aug 2009, 1:49 AM
For positioning see http://extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Element&member=alignTo

YUP this was it! thanks!

Xander75
2 Sep 2009, 5:54 AM
Hi,

I have an issue when trying to use this to display a div element. The first time it displays with no issues, however on hide or close of the MessageWindow it deletes the DOM elements within the div leaving only the div element entact.

This is the code I have tried below to resolve it however I can't seem to see why it is deleting when I have... autoDestroy: false, closeAction: 'hide' & hideAction: 'hide'



if (!winDesktopDateTime) {
winDesktopDateTime = new Ext.ux.window.MessageWindow({
title: sTitle,
autoDestroy: false,
autoHeight: false,
autoHide: true,
bodyStyle: 'text-align:center',
closeAction: 'hide',
height: iHeight,
help: false, //no help tool
hideAction: 'hide',
contentEl: 'DesktopDateTime',
iconCls: 'x-icon-information',
pinState: 'unpin', //render pinned or unpinned
showFx: {
duration: 1, //defaults to 1 second
mode: 'standard',//null,'standard','custom',or default ghost
useProxy: false //default is false to hide window instead
},
width: iWidth //optional (can also set minWidth which = 200 by default)
}).show(Ext.getDoc());
} else {
winDesktopDateTime.show(Ext.getDoc());
}


Anyone able to help resolve why this keeps deleting itself? I must be overlooking something...

Thanks.

Xander75
2 Sep 2009, 6:33 AM
I have found that although the elements are deleted they are still available within the variable winDesktopDateTime that I created.

It would appear that I am unable to show the MessageWindow a 2nd time unless I use winDesktopDateTime.show() however this means that no animation is used and the window opens in the center of the the screen.

Anyone got any ideas?

Xander75
7 Sep 2009, 1:40 AM
I have since resolved my issue with the animation by creating a DesktopClock.asp file and referencing this from the html property of the MessageWindow by placing it into an iframe.

http://i28.tinypic.com/dxh85w.jpg

jasondeegan
4 Dec 2009, 8:36 AM
If you're not using a Viewport (fixed size window) and you use this very cool tool, if you fade in from the bottom or right (for a bottom-right-aligned messageWindow) it adds scrollbars (tags: scroll bars, scrollbar, horizontal, vertical, scroll).

It makes sense, but I can't seem to figure out how to fix. I can't just "overflow:hidden" my body, 'cause then my user can't move down the page to see all the content.

Anybody have any ideas? I have this problem with all the notification boxes I've found.

Thanks!

Jason

maax
28 Apr 2010, 4:35 AM
Great extension.

It works also with 3.2.1.
There is just not the shadow when messageWindow disappears.
Anyone know a way to solve this little issue ?

Thanks
Max

Joshua043
14 May 2010, 9:47 AM
I also get the error with the shadow that stays on the screen after using the hide() function.
Can't seem to find how to get rid of this yet, anyone else?

Asken
29 Jun 2010, 5:03 AM
I have also a minor thing. When "un-pinning" a pinned window above another it is on top of other MessageWindows. I'm not able to unpin next window until the unpinned is completely gone.

GFI_SI
15 Jul 2011, 2:55 AM
I was wondering if anyone knew where the docs for this have gone?

srn
17 Oct 2011, 8:46 AM
I was wondering if anyone knew where the docs for this have gone?
I sure would like to know too. Not just the docs but the plugin itself.

The site it was all posted on has rotted.