[OPEN-120] Bug with z-index in Ext.anims

[stormin_walker]

I am building an app that makes heavy use of sheets & pickers (I have a custom calendar, custom number pad, action sheets etc). Unfortunately every so often the picker or sheet goes behind the currently active panel and every subsequent sheet has the same problem.

I figured out that what was happening is the main (i.e, not floating) panels get a z-index as they're being animated around (I'm guessing to make sure they animate and position themselves correctly as the active panel when say a slide is finished). Unfortunately the z-index was being set too high because the Ext.anims function was adding 1 to the z-index, but rather than adding the number 1 it was appending 1 to a string. So very quickly the z-index would reach "11111" which is higher than the default z-index for x-floating.

Almost all the animation configs in Ext.anims have the lines:

var curZ = el.getStyle('z-index') == 'auto' ? 0 : el.getStyle('z-index'),
...

The first time it's right but the second and following times it isn't (because el.getStyle("z-index") is returning a string). My simple fix is to force curZ to be a number and to change this line to:

var curZ = parseFloat(el.getStyle('z-index') == 'auto' ? 0 : el.getStyle('z-index')),

This works perfectly for me.

I've checked the 1.1.x branch and the bug still exists in there.

Hope this helps someone (helped me :))

Thanks

Craig

[vinny8978]

I'm having a z-index problem

I have a floating search panel that pops up on button click.... and when I click a search result it pops up a Action Sheet, it seems fine until I try clicking a button on the sheet, it seems to be clicking the search panel behind it.

[rdougan]

@stormin_walker

Bug report opened. Thanks for the fix.