如何创建一个仅屏蔽 ExtJs 4 中特定组件的模式窗口？答案

【问题标题】：How to create a modal window which only masks a particular component in ExtJs 4?如何创建一个仅屏蔽 ExtJs 4 中特定组件的模式窗口？
【发布时间】：2011-06-21 16:31:55
【问题描述】：

我想创建一个模态窗口，它只会掩盖我的应用程序的中心区域。
我怎样才能做到这一点？

在 ExtJs 3 中，我能够使用 windows renderTo 属性并将窗口渲染到中心区域。这样当窗口显示时，只有中心区域被屏蔽。

但是，如果我在 ExtJs 4 中使用 renderTo 属性，则整个 document.body 都会被屏蔽。而在 IE 中，整个窗口也被屏蔽了。

下面是 Ext 示例中的边框布局示例。在中心区域有一个模态窗口。（显示时整个身体都被遮住了）

  Ext.onReady(function() {
var cw;

Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [{
        region: 'north',
        collapsible: true,
        title: 'North',
        split: true,
        height: 100,
        html: 'north'
    },{
        region: 'west',
        collapsible: true,
        title: 'Starts at width 30%',
        split: true,
        width: '30%',
        html: 'west<br>I am floatable'
    },{
        region: 'center',
        layout: 'border',
        border: false,
        items: [{
            region: 'center',
            html: 'center center',
            title: 'Center',
            items: [cw = Ext.create('Ext.Window', {
                xtype: 'window',
                closable: false,
                minimizable: true,
                title: 'Constrained Window',
                height: 200,
                modal: true, //MODAL WINDOW, MASKS THE WHOLE DOCUMENT BODY?
                width: 400,
                constrain: true,
                html: 'I am in a Container',
                itemId: 'center-window',
                minimize: function() {
                    this.floatParent.down('button#toggleCw').toggle();
                }
            })],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['Text followed by a spacer',
                    ' ', {
                        itemId: 'toggleCw',
                        text: 'Constrained Window',
                        enableToggle: true,
                        toggleHandler: function() {
                        cw.setVisible(!cw.isVisible());
                    }
                }]
            }]
        },{
            region: 'south',
            height: 100,
            split: true,
            collapsible: true,
            title: 'Splitter above me',
            html: 'center south'
        }]
    },{
        region: 'east',
        collapsible: true,
        floatable: true,
        split: true,
        width: 200,
        title: 'East',
        layout: {
            type: 'vbox',
            padding: 5,
            align: 'stretch'
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Text field'
        }, {
            xtype: 'component',
            html: 'I am floatable'
        }]
    },{
        region: 'south',
        collapsible: true,
        split: true,
        height: 200,
        title: 'South',
        layout: {
            type: 'border',
            padding: 5
        },
        items: [{
            title: 'South Central',
            region: 'center',
            html: 'South Central'
        }, {
            title: 'South Eastern',
            region: 'east',
            flex: 1,
            html: 'South Eastern',
            split: true,
            collapsible: true
        }, {
            title: 'South Western',
            region: 'west',
            flex: 1,
            html: 'South Western<br>I collapse to nothing',
            split: true,
            collapsible: true,
            collapseMode: 'mini'
        }]
    }]
});
});

【问题讨论】：

恕我直言，问题需要澄清。根据定义，模态不允许您与其“父级”交互。视觉“掩蔽”只是 Ext 的眼睛糖果。所以你是说你想要一个非模态对话框来掩盖父级中的某些区域/组件？还是您仍然说您想要模态但除了某些区域/组件之外不应在视觉上屏蔽父级？
@AMOL：我重新表述了我的问题。我想要做的是将一个窗口呈现给一个容器，以便在显示该窗口时只屏蔽父容器？

标签： javascript extjs window modal-dialog extjs4

【解决方案1】：

两种方式...

通过组件的 ID：

Ext.getCmp('componentId').getEl().mask()

或者通过元素的 ID：

Ext.get('elementId').mask()

我猜第一个就是你需要的。您可以将其绑定到窗口上的事件侦听器...

listeners: {
    'show': function() {
        Ext.getCmp('componentId').getEl().mask();
    },
    'hide': function() {
        Ext.getCmp('componentId').getEl().unmask();
    }
}

编辑：

如 ExtJS 4.0.2 API 文档中所述...模态掩盖了 Window 后面的所有内容，而不仅仅是它的父级...

True 使窗口模式化并在显示时掩盖其后面的所有内容，False 以显示它而不限制对其他 UI 元素的访问（默认为 false）。

【讨论】：

@Jaitsu：这将如何用于模态窗口？由于模态窗口会掩盖整个身体？
toggle modal: false 所以它不会屏蔽任何东西，然后只需使用上面的代码来屏蔽你想要的元素/组件
@Jaitsu：那么这是 Ext 代码的错误吗？或者这是正确的方法吗？
这不是错误，“模态”的想法是防止与所有其他元素的交互，因此它会掩盖它。在您的情况下，您只想屏蔽特定元素，因此需要这样做的代码
我明白了。但我认为“模态”只会掩盖 Windows 父容器。例如，我想将一个窗口呈现到选项卡面板中的特定选项卡并屏蔽该面板。这样我就可以打开更多选项卡，但该窗口将始终相对于它呈现到的第一个选项卡，而不显示在其他选项卡中。

【解决方案2】：

您不能将模态窗口添加到整个视口，而只能添加到“中心”区域。在这种情况下，只有这个区域会被屏蔽。有一些代码：

var window = Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    modal: true
});

this.getViewport().child('[region=center]').add(window);
window.show();

【讨论】：

【解决方案3】：

使用renderToctor 参数

示例：

dialog = new Ext.ux.AnimateWindow({
    renderTo: App.FeedPanel.el.dom.firstElementChild.firstElementChild,
    modal: true,
    title: "Add Feed Source",
    closable: true,
    resizable: false,
    width: 350,
    items: [form]
});

【讨论】：