Using zIndex

@shukino

The following code works for me in GA:

Code:

---

Ext.application({
    name: 'Sencha',

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

---

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.

Code:

---

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,

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

At least I found a workaround:

Code:

---

           
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.

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:

Code:

---

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

---

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