1. #11
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    @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'
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  2. #12
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    shukino is on a distinguished road

      0  

    Default ZIndex in TabletPicker, PhonePicker

    ZIndex in TabletPicker, PhonePicker


    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,

  3. #13
    Sencha User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    1
    bartvde is on a distinguished road

      0  

    Default


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

  4. #14
    Sencha User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    1
    bartvde is on a distinguished road

      0  

    Default


    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.

  5. #15
    Sencha User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    1
    bartvde is on a distinguished road

      0  

    Default


    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;
    }

  6. #16
    Sencha User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    1
    bartvde is on a distinguished road

      0  

    Default


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

  7. #17
    Sencha User
    Join Date
    Aug 2012
    Posts
    15
    Answers
    1
    Vote Rating
    0
    blopes is on a distinguished road

      0  

    Default z-index

    z-index


    Hi there,


    Is that possible to use the z-index to have for example panels with deep in order to have 3D effect ?

    Thanks,

    Bruno