Extjs：模态 window 的遮罩组件

Question

我需要在另一个正常 window 中创建模态 window。当我创建模态时 window 被屏蔽了。

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
模态 window 组件是 19010
简单window分量是19000

我不明白我哪里错了。

Answer 1

问题是您将 win2 渲染为 win1.getEl()。通常，您不会将 window 渲染成任何东西，让它自己照顾自己。

的确，如果你删除

renderTo: win1.getEl(),

来自你的 fiddle，模态 window 正在工作。

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

floatParent : win1,

改为 win2。

Extjs：模态 window 的遮罩组件

Extjs: Mask component for modal window

javascript

extjs

z-index