Using zIndex

[bortron5000]

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

[mitchellsimoens]

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.

[bortron5000]

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

[mitchellsimoens]

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.

[bortron5000]

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

[rdougan]

If you have only one floating component, then zIndex is pointless because it is the only item to add into the view hierarchy.

[bortron5000]

Okay, so what I'm getting is

1. "A good UI is to only have one floating component open at once"
2. "If you have only one floating component, zIndex is pointless"

Therefore, zIndex is pointless?

Just curious, I've worked around the issue by hiding and showing the panels appropriately anyway, thanks Mitchell.

[rdougan]

Pretty much, yes. But there can be some complex layouts, especially on tablets, which require some overlapping; in which case you'd need zIndex.

Plus the it is a CSS property and developers tend to do whatever they want, and not necessarily create a "good UI".

[bortron5000]

Aha, overlapping, that sounds more like it. Although for the record, I was trying to use zIndex to re-order two floating panels and it didn't seem to affect anything. I suppose we can leave that issue for the "bad UI" developers

[shukino]

I also have questions about changing zIndex for floating panel.

I plan to migrate my application from sencha-touch 1.1 to 2.0.
I need to use other javascript component whose zIndex is larger than sencha-touch, even for floating one.

In sencha-touch 1.1, floating z-index was 10,000, as far as I know.
In sencha-touch 2.0RC, floating z-index seems 6 in default.

But I could not change z-index Panel in modal by config parameter: zIndex.

I tried to change in scss too, but z-index seems to be updated dynamically.
So not work this too.

I understand floating zindex specification has changed in sencha-touch 2.0.
However, could you advice me how to solve this problem?