javascript - Extjs:模态窗口的 mask 组件

Question

我需要在另一个普通窗口中创建一个模态窗口。当我创建模态窗口时被遮挡掩码。

Ext.application({
name : 'Fiddle',

launch : function() {
    var win2 = null;

    var win1 = Ext.create('Ext.window.Window', {
        closeAction: 'hide',
        width: 500,
        height: 500,
        resizable: false,
        titleAlign: 'center',
        items: {
            xtype: 'button',
            text: 'show modal',
            handler: function() {win2.show()}
        },
        title: 'Simple window'
    });

    Ext.create('Ext.panel.Panel', {
        items: {
            xtype: 'button',
            text: 'show window',
            handler: function() {
                var isRendered = win1.rendered;
                win1.show(null, function() {
                    if (!isRendered) {
                        win2 = Ext.create('Ext.window.Window', {
                            closeAction: 'hide',
                            resizable: false,
                            titleAlign: 'center',
                            width: 200,
                            height: 200,
                            renderTo: win1.getEl(),
                            modal: true,
                            title: 'Modal window'
                        })
                    }
                });
            }
        },
        renderTo: Ext.getBody()
    });
}});

z-index 是对的:

• 掩码组件为19006
• 模态窗口组件为19010
• 简单的窗口组件是19000

我不明白我哪里错了。

Answer 1

问题是您将 win2 渲染到 win1.getEl() 中。通常，您不会将窗口渲染到任何东西中，让它自行处理。

确实，如果你删除

renderTo: win1.getEl(),

从你的 fiddle ，模态窗口正在工作。

如果出于某种原因，您希望 win2 仅在 win1 内部是模态的，您可以使用

floatParent : win1,

在 win2 上。