如何创建一个仅掩盖ExtJs 4中特定组件的模态窗口？

Question

我想创建一个模态窗口,它只会屏蔽我的应用程序的中心区域.
我怎样才能做到这一点？

在ExtJs 3中,我能够使用windows renderTo属性并将窗口渲染到中心区域.因此,当显示窗口时,仅中心区域被遮盖.

但是,如果我renderTo在ExtJs 4中使用该属性,则整个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'
        }]
    }]
});
});

Answer 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).