1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Answers
    1
    Vote Rating
    0
    eogas is on a distinguished road

      0  

    Default Answered: Floating an element inside a tabpanel (or any cardlayout)

    Answered: Floating an element inside a tabpanel (or any cardlayout)


    Hello all, I'm currently working on a large project, and I've come across a frustrating situation. I have an element that needs to float on top of the content inside a cardlayout. I'm able to float it above everything with ease, however I need it to float only above the content of a single panel.

    I have created a jsfiddle to better demonstrate what I'm trying to do: http://jsfiddle.net/evanogas/n8nkD/2/

    In the fiddle, I just have a button added to the second tab, however I'd like it to float above the panel in that tab. However I'd also like it to go away when I navigate to the other tabs. This is the part that has me totally stumped.

    I don't know if it's like this for all cardlayouts, but I have confirmed that tying into events is not an option for my specific situation. Everything is rendered all the time. There are no consistent hide() or show() events for anything in the layout, so I can't explicitly hide the floating element and re-show it without ending up with some really unsavory code.

    I tinkered around with renderTo and constrainTo with little success, so I figured I'd post here to see if anyone has any good ideas off the top of their head. Thanks!

    As an added note, the documentation for the floating config implies that if I add the floating element to a parent container, everything will magically work fine, but that does not appear to be the case. In my example, if I add my button as a child of the tab, it doesn't get rendered at all.

  2. The activate events weren't firing due to what appears to be a bug elsewhere in the app.

    I ended up solving the problem by simply using an absolute layout, setting the x and y positions, and correctly handling the z-index. Here's a working example on jsFiddle: http://jsfiddle.net/n8nkD/5/

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


    The floating button you want to be able to move around only in the 2nd tab? Do you want it movable only within the body of the tab or anywhere in the tab panel?

    Also, with card layout you get activate and deactivate methods on each item of the card layout that can be used instead of show/hide.
    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.

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Answers
    1
    Vote Rating
    0
    eogas is on a distinguished road

      0  

    Default


    The activate events weren't firing due to what appears to be a bug elsewhere in the app.

    I ended up solving the problem by simply using an absolute layout, setting the x and y positions, and correctly handling the z-index. Here's a working example on jsFiddle: http://jsfiddle.net/n8nkD/5/

Thread Participants: 1

Tags for this Thread