Как создать модальное окно, которое маскирует только определенный компонент в ExtJs 4? - PullRequest
Новая
       18

Как создать модальное окно, которое маскирует только определенный компонент в ExtJs 4?

1 голос
/ 21 июня 2011

Я хотел бы создать модальное окно, которое будет маскировать только центральную область моего приложения.
Как мне этого добиться?

В ExtJs 3 я мог использовать окна 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'
        }]
    }]
});
});

Ответы [ 3 ]

5 голосов
/ 22 июня 2011

Два пути ...

Через идентификатор компонента:

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

Или через идентификатор элемента:

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

Я предполагаю, что первое, что вам нужно. Вы можете просто привязать его к слушателю событий в окне ... 

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

EDIT:

Как описано в документации по ExtJS 4.0.2 API ... модальное маскирует все, что находится за окном, а не только его родителя ...

Верно, чтобы сделать окно модальным и замаскировать все, что за ним, когда отображается, ложно, чтобы отобразить его, не ограничивая доступ к другим элементам пользовательского интерфейса (по умолчанию false).

4 голосов
/ 07 сентября 2012

Вы можете добавить модальное окно не ко всему окну просмотра, а только к центру.В этом случае только этот регион будет замаскирован.Есть некоторый код: 

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

this.getViewport().child('[region=center]').add(window);
window.show();
0 голосов
/ 02 декабря 2015

использование renderTo ctor param

пример: 

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