javascript - 如何创建只掩盖ExtJs 4中特定组件的模态窗口？

我想创建一个模态窗口，该窗口只会掩盖我的应用程序的中心区域。
我该如何实现？

在ExtJs 3中，我可以使用windows renderTo属性并将窗口渲染到中心区域。这样，当显示窗口时，只会遮挡中心区域。

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

以下是“扩展示例”中的边框布局示例。在中央区域有一个模态窗口。 （如图所示，整个身体被遮盖了）

  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'
        }]
    }]
});
});

最佳答案

两种方式...

通过组件的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文档中所述...模态掩盖了窗口背后的所有内容，而不仅仅是它的父...


  如果为True，则使窗口变为模态并在显示时遮盖其后的所有内容；如果为false，则在不限制访问其他UI元素的情况下显示该窗口（默认为false）。