PDA

View Full Version : Balloon Popups



paulharv
7 Sep 2010, 5:59 AM
Hi,

I need to implement Windows style balloon popup messages, to notify users of events.
It doesn't look like ExtJS jas that built in, but it there something similar, or a plugin/extension you could recommend?

Thanks

Paul

Condor
7 Sep 2010, 6:23 AM
Ext.ToolTip?

paulharv
7 Sep 2010, 12:09 PM
Thanks - tried playing around with that and what I can't figure out is how to display one in the same way I can display an Ext.MessageBox. is it possible to use them like that?

What I'm trying to do is display a message to users in the lower left of the screen when a certain event happens. (The app uses a ViewPort if that makes any difference.)

Thanks

Condor
7 Sep 2010, 10:54 PM
Example:

var v = new Ext.Viewport({
layout: 'fit',
items: {
title: 'Test'
}
});
var t = new Ext.ToolTip({
anchor: 'bottom',
anchorToTarget: false,
targetXY: [v.getWidth() - 100, v.getHeight()],
title: 'Tip',
html: 'Hello world',
hideDelay: 15000,
closable: true
});
t.show();

paulharv
8 Sep 2010, 5:37 AM
That's the ticket! Thanks so much! Don't know how I'd have got there myself to be honest!

Animal
8 Sep 2010, 5:52 AM
Or



var v = new Ext.Viewport({
layout: 'fit',
items: {
title: 'Test'
}
});
var t = new Ext.ToolTip({
floating: {
shadow: false
},
title: 'Tip',
html: 'Hello world',
hideDelay: 150000,
closable: true
});
t.showAt([0,0]); // ensure it's rendered and visible so that it has dimensions for following calc
t.showAt(t.el.getAlignToXY(v.el, 'bl-bl', [10, -10]));
t.el.slideIn('b');


What you can do is limited only by your imagination!

Condor
8 Sep 2010, 5:57 AM
Yes, but with anchor:false I couldn't get the tooltip to display as a balloon popup.

And with an anchor I had a lot of trouble to get it to display anchored INSIDE an element instead of outside.

paulharv
8 Sep 2010, 7:42 AM
Thanks for your input.
Here's how it's looking...
22283

The grey on the left is the west panel of the Viewport.
The desktop on the right is an applet.
See how the tootip is messed up where it overlaps the applet?
I wondered if tooltip.doLayout() would get it to to redraw correctly but it does not.

If instead I simply show a <div> at those same coordinates it displays fine over the applet.

Any suggestions on what I might try? Is it the shadow perhaps?

Cheers

Animal
8 Sep 2010, 7:55 AM
Ext.useShims = true;
var v = new Ext.Viewport({
layout: 'fit',
items: {
title: 'Test'
}
});
var t = new Ext.ToolTip({
floating: {
shim: true
},
style: {
'background-color': '#000'
},
title: 'Tip',
html: 'Hello world',
dismissDelay: 15000,
closable: true
});
t.showAt([0,0]);
t.showAt(t.el.getAlignToXY(v.el, 'bl-bl', [10, -10]));
t.el.shadow.el.slideIn('b');
t.el.slideIn('b');

paulharv
8 Sep 2010, 9:03 AM
I'm afraid that didn't help. Our Viewport uses a border layout if that has any bearing.
Cheers

Animal
8 Sep 2010, 9:34 AM
Post #9 updated.

I tested this over an applet here.

steffenk
8 Sep 2010, 9:41 AM
what does shim? I don't understand the sentence from doc, and my translator doesn't help to find a meaning.

Animal
8 Sep 2010, 9:57 AM
shim means use an <iframe> as an "underlay" to hide any troublesome plugins.

Elements with a backgroundColor then will show up above the plugin.

But elements with background of transparent will not. Hence the "border" bit of the Panel not showing up.

steffenk
8 Sep 2010, 10:01 AM
ah i see, so it's mainly to prevent z-index problems when having flash objects.

Thanks Nige.