Ext.Window overflow image outside window

[chrisgd]

Hello,

I want to have an image shown on hovering a link inside Ext.Window and the image should overflow the frame of the window. I tried some efforts with "overflow:visible" and "z-index", but it doesn´t work. Any idea?

Thank you.
Chris

[mitchellsimoens]

So you have an Ext.window.Window and a link within it and when you hover over it you want to show an image floating above it and outside the Window?

[chrisgd]

Yes, that´s what I like to have. It seems that you have a solution for me

[mitchellsimoens]

You can create an Ext.Img component and make it floating and position it to be above the link. Or you can use a tip which will also have bounds checking

[chrisgd]

Mitchell, thank you for your assistance. Unfortunately I cannot try to get your advices work, because I still "use" ExtJS 3.4, and I think Ext.Img is new in ExtJS 4. I can´t switch (or better I fear to switch) to Version 4 because I combined Ext, Openlayers and some deprecated GeoExt Code. I tried to change and nothing worked ...

The thing with the label is no option, because I want a small image gallery to overlay the Ext.Window.

So what I did now is to open another Ext.Window with the link in the first Ext.Window (GeoExt.Popup). It works, but not without "mistakes":
If I use window.close(); I cannot open the second window again from the link. I fist have to close also the first window and then start from the beginning. By closing the window it´s not there any more and I get the message "TypeError: Ext.getCmp(...) is undefined"

So I used window.hide(); but then I have the problem, that if I open the two windows for another feature on my map the second overlay window shows the content of the overlay window that was opened at first after starting the app. More clear:

click 1st Feature: Window 1.1 (shows content 1.1) >>> Overlay Window 1.2 (shows content 1.2)
click 2nd Feature: Window 2.1 (shows content 2.1) >>> Overlay Window 2.2 (shows content 1.2)
click 3rd Feature: Window 3.1 (shows content 3.1) >>> Overlay Window 3.2 (shows content 1.2)
...

So the 2nd overlay Window has to be refreshed after closing it. I tried
window.on('hide', function() {this.refresh();});
also reset, reload, clear, destroy, update (content is deleted), but nothing does refresh the window content. Somebody else had this problem, but the links in the discussion don´t exist any more:
http://www.sencha.com/forum/showthre...esh-Ext.Window

I reduced some code to the essential, maybe that´s more valuable for you. I know, it´s a big request, so if you have an idea which would be time-consuming I would donate something if it´s possible, instead of sending you German beer...

The code:

function createPopup_3(feature) {

var gallerycontent =
"<b>Gallerycontent</b>" + feature.attributes.openshop + " welcome<br>" +
"<a href='#' onclick='Ext.getCmp(\"picwin\").hide();'>HIDE BOX</a><br>"
;

var picwindow = new Ext.Window({
id:'picwin',
title:'Name: &nbsp;' + feature.attributes.name,
html: gallerycontent,
});

picwindow.on('hide', function() {this.refresh();});
// How can I refresh the html gallerycontent of the Ext.Window by hiding it???

var popupcontent =
"<a href='#' onclick='Ext.getCmp(\"picwin\").show();'>SHOW BOX</a><br>"
;

popup_3 = new GeoExt.Popup({
title: feature.attributes.name,
feature: feature,
html: popupcontent,
});

popup_3.on({close: function() {
{selectControl_1.unselect(this.feature)};
}});

popup_3.show();
}

I hope you have the solution that will make my next nights longer Thank you in advance!

Chris

[chrisgd]

Mitchell, thank you for your assistance. Unfortunately I cannot try to get your advices work, because I still "use" ExtJS 3.4, and I think Ext.Img is new in ExtJS 4. I can´t switch (or better I fear to switch) to Version 4 because I combined Ext, Openlayers and some deprecated GeoExt Code. I tried to change and nothing worked ...

The thing with the label is no option, because I want a small image gallery to overlay the Ext.Window.

So what I did now is to open another Ext.Window with the link in the first Ext.Window (GeoExt.Popup). It works, but not without "mistakes":
If I use window.close(); I cannot open the second window again from the link. I fist have to close also the first window and then start from the beginning. By closing the window it´s not there any more and I get the message "TypeError: Ext.getCmp(...) is undefined"

So I used window.hide(); but then I have the problem, that if I open the two windows for another feature on my map the second overlay window shows the content of the overlay window that was opened at first after starting the app. More clear:

click 1st Feature: Window 1.1 (shows content 1.1) >>> Overlay Window 1.2 (shows content 1.2)
click 2nd Feature: Window 2.1 (shows content 2.1) >>> Overlay Window 2.2 (shows content 1.2)
click 3rd Feature: Window 3.1 (shows content 3.1) >>> Overlay Window 3.2 (shows content 1.2)
...

So the 2nd overlay Window has to be refreshed after closing it. I tried
window.on('hide', function() {this.refresh();});
also reset, reload, clear, destroy, update (content is deleted), but nothing does refresh the window content. Somebody else had this problem, but the links in the discussion don´t exist any more:
http://www.sencha.com/forum/showthre...esh-Ext.Window

I reduced some code to the essential, maybe that´s more valuable for you. I know, it´s a big request, so if you have an idea which would be time-consuming I would donate something if it´s possible, instead of sending you German beer...

[mitchellsimoens]

I'm sorry, I assumed you were using Ext JS 4 as you posted this in Ext JS 4 Q&A forum not the Ext JS 3 Help forum.