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(),

来自你的小提琴，模态窗口正在工作。

如果由于某种原因，您希望win2仅在win1中为模态，则可以使用

floatParent : win1,

在win2上。

Extjs：模态窗口的Mask组件

1 个答案: