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 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,556
    Answers
    3931
    Vote Rating
    1272
      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! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  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,556
    Answers
    3931
    Vote Rating
    1272
      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! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  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 User 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
  •