javascript - How to create a modal window which only masks a particular component in ExtJs 4? - Stack Overflow

admin管理员组

文章数量:1344708

I would like to create a modal window which will only mask the center region of my application.
How can I achieve this?

In ExtJs 3 I was able to use the windows renderTo property and render the window to the center region. So that when the window was shown only the center region was masked.

However if I use the renderTo property in ExtJs 4 the whole document.body is masked. And in IE the whole the window is also masked.

Below is the border layout example from the Ext Examples. with a modal window in the center region. ( the whole body gets masked when shown)

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

I would like to create a modal window which will only mask the center region of my application.
How can I achieve this?

In ExtJs 3 I was able to use the windows renderTo property and render the window to the center region. So that when the window was shown only the center region was masked.

However if I use the renderTo property in ExtJs 4 the whole document.body is masked. And in IE the whole the window is also masked.

Below is the border layout example from the Ext Examples. with a modal window in the center region. ( the whole body gets masked when shown)

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

• javascript
• extjs
• window
• modal-dialog
• extjs4

Share Improve this question Follow edited Jun 22, 2011 at 9:43 shane87 asked Jun 21, 2011 at 16:31 shane87shane87 3,1201313 gold badges5252 silver badges6666 bronze badges 2

• IMHO, question needs clarification. By definition, modal disallows you from interacting with its 'parent'. visual 'masking' is just Ext's eye candy. so are you saying you want a non modal dialog that masks certain area/ponents in the parent? or are you still saying you want modal but the parent should not be visually masked except for certain regions/ponents? – Amol Katdare Commented Jun 21, 2011 at 22:33
• @AMOL: I have rephrased my question. What I want to do is render a window to a container so that when that window is shown only the parent container is masked? – shane87 Commented Jun 22, 2011 at 9:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Two ways...

Via the ponent's ID:

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

Or via the element's ID:

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

I'm guessing that the first one is what you'll need. You can just bind it to an event listener on the window...

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

EDIT:

As described in the ExtJS 4.0.2 API docs... modal masks everything behind the Window, not just it's parent...

True to make the window modal and mask everything behind it when displayed, false to display it without restricting access to other UI elements (defaults to false).

You can add modal window not to the whole viewport, but to the 'center' region only. In this case only this region will be masked. There are some code:

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

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

use renderTo ctor param

expample:

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

本文标签： javascriptHow to create a modal window which only masks a particular component in ExtJs 4Stack Overflow