Using zIndex

[rdougan]

@shukino

The following code works for me in GA:

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.Viewport.add({
            top: 10,
            left: 10,
            width: 100,
            height: 100,
            modal: true,
            zIndex: 999,
            style: 'background:red'
        });
    }
});

[shukino]

Thank you for your response.
Simple floating Panel's zIndex seems to have been fixed in sencha-touch 2.0.0.

However, modifying zIndex for floating panel in Select does not work, I think.
After showBy zIndex became small.
Please check console.log.

Ext.application({
    launch: function () {
        var select = Ext.create('Ext.field.Select', {
            label: 'Choose one',
            width: 300,
            padding: 2,
            zIndex: 100,
            defaultTabletPickerConfig: {
                zIndex: 999,
                layout: 'fit'
            },
            options: [{
                text: 'First',
                value: 'first'
            }, {
                text: 'Second',
                value: 'second'
            }]
        });        //codes inside Select
        var listPanel = select.getTabletPicker(),
            list = listPanel.down('list'),
            store = list.getStore(),
            index = store.find(select.getValueField(), select.getValue(), null, null, null, true),
            record = store.getAt((index == -1) ? 0 : index);
        Ext.Viewport.add(listPanel);
        console.log('1st zIndex: ' + listPanel.getZIndex());
        listPanel.showBy(select.getComponent());
        list.select(record, null, true);
        console.log('2nd zIndex: ' + listPanel.getZIndex());
        var container = Ext.create('Ext.Container', {
            fullscreen: true,
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                items: [select]
            }]
        });
        Ext.Viewport.add(container);
    }
});

I used following environment.
sencha-touch-2.0.0-gpl
sencha-touch-all-debug.js

Regards,

[bartvde]

having the same issue, can't modify zIndex of the select-overlay of a select field .....

[bartvde]

At least I found a workaround:

            
defaultTabletPickerConfig: { 
    zIndex: 1000,
    updateZIndex: Ext.emptyFn
},

but of course this issue needs attention. If you are mixing Sencha Touch with another library, adjusting zIndexes needs to be possible IMHO.

[bartvde]

Hmm somehow this workaround stopped working, what did work was overriding the updateZIndex function with an empty function and then just setting the z-index in css:

div.x-select-overlay {
    z-index: 1000;
}

[bartvde]

It works fine in debug mode, but not in production, any idea why?