Sencha - modal on top of another modal?

Question

A modal panel on top of another modal panel?

Is this possible in Sencha? My modal window opens, but it opens behind my already open modal. Any help would be greatly appreciated.

Also...not sure if this matters but I am using the same controller for both modals.

Here is my second modal view:

Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N 
    config: {
        xtype: 'panel',
        cls: 'dialogview formview',
        centered: true,
        scrollable: 'vertical',
        modal: true,
        screenId: 'opbuyoffvoidview',
        layout: {
            type: 'vbox',
            align: 'center',
        },
        defaults: {
            minHeight: 46
        },
        items: [
        {
        xtype: 'toolbar',
        docked: 'top',
        title: 'Void Buyoff',
        cls: 'grey-bold-34pt',
        ui: 'transparent',
        items: [{
            xtype: 'button',
            cls: 'grey-bold-40pt greyBtn',
            text: 'Cancel',
            idForAction: 'opbuyoff-void-cancel_btn',
        },  {
            xtype: 'spacer',
        },{
            xtype: 'button',
            cls: 'grey-bold-40pt greyBtn',
            textI18N: 'Save',
            idForAction: 'opbuyoff-void-save_btn',
        }],
        },
        {
        xtype: 'container',
        ui: 'transparent',
        layout: 'vbox',
        cls: 'OpBuyoffVoidContainer',
        items: [{
            xtype: 'panel',
            flex: 1,
            ui: 'transparent',
            items: [{
                xtype: 'container',
                cls: 'formContainer dialogContentScrolling',
                items: [{
                    xtype: 'formpanel',
                    scrollable: null,
                    ui: 'transparent',
                    cls: 'fieldSetReadOnly',
                    defaults: {
                        xtype: 'textfield',
                        labelCls: 'lightgrey-bold-28pt',
                        readOnly: true,
                    },
                    items: [{
                        labelI18N: 'Buyoff:',
                    },{
                        id: 'buyoff_group_void',
                    },{
                        labelI18N: 'User:',
                    },{
                        id: 'buyoff_user_void',
                    }],
                }],
            },{
                xtype: 'label',
                htmlI18N: 'You are voiding the above Buyoff.  Please enter the reason for the void below:',
                //cls: 'priorityLowLabel',
            },{
                xtype: 'textareafield',
                idForUpdate: 'buyoff_reason_void',
                //cls: 'priorityMedLabel',
            },{
                xtype: 'label',
                htmlI18N: '*Reason is required to void a buyoff',
                //cls: 'priorityHighLabel',
            }],
        }],
    }],
        listeners: {
        initialize: function(me, eOpts) {
            CAMSApp.util.I18N.resolveStaticUIBindings(me); 
        },
        show: function (me, eOpts) {
            // Publish the screen id event.
            log('[OpBuyoffVoid.show]');
            CAMSApp.app.fireEvent('setscreenfocus', this);
        },
    },
}

});

Answer 1

That should not be a problem. When you open 2 modal windows, the second one overlaps the first one with a z-index 10 higher than the first. I think the problem is with the order in which you are showing the modal windows. Check out a quick fiddle I created to validate on ExtJS 6

https://fiddle.sencha.com/#fiddle/133n