1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    chrisgd is on a distinguished road

      0  

    Default Unanswered: Ext.Window overflow image outside window

    Unanswered: Ext.Window overflow image outside window


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    chrisgd is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    chrisgd is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    chrisgd is on a distinguished road

      0  

    Default


    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...

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread