Results 1 to 10 of 17

Thread: Using zIndex

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
      0  

    Default Unanswered: Using zIndex

    Hi All,

    Right now I have a floating tab panel (modal is set to true) with a button on it that spawns another floating panel, this time a form panel. The spawned form panel is appearing behind the initial tab panel (I can close the tab panel and then I'm able to see the form panel). I've tried hard-coding the zIndex config for both panels to pretty much every configuration I could think of, using both raw integers and string values, but the form panel continues to appear behind the tab panel. I've also gotten hold of the components after they've been rendered and confirmed that the zIndex is being set correctly. How can I make the second panel appear in front of the first panel? Thanks

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Answers
    3901
    Vote Rating
    1271
      0  

    Default

    A good UI is to only have one floating component open at once. You can hide one and show the other and when the 2nd closes show the first.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
      0  

    Default

    Ah ok, that makes sense. For my edification, and to give this thread some sense of purpose, what is zIndex typically used for?

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Answers
    3901
    Vote Rating
    1271
      0  

    Default

    You have 3 dimensions... x, y, and z. x is the horizontal position, y is the vertical position, z is the level that is "on top" of other elements or behind them.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
    Touch Premium Member
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    0
      0  

    Default

    Ok, but if there's only ever one floating component, where does z-Index come in handy?

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default

    If you have only one floating component, then zIndex is pointless because it is the only item to add into the view hierarchy.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •