как сделать полное модальное окно в ext 4? - PullRequest
Новая
       7

как сделать полное модальное окно в ext 4?

8 голосов
/ 19 мая 2011

Как окно в ОС Microsoft (XP, Vista, 7 и т. Д.) ...

Если главное окно создает модальное окно, пользователь не может получить доступ к главному окну,
(включая закрытие и доступ к панели инструментов и т. д.).

Я хочу сделать аналогичный с extjs. Это мой модальный пример: 

Ext.create("Ext.Window", {
    title: 'aa',
    width: 200,
    height: 150,
    html: 'a',
    tbar: [{
        text: 'aa',
        handler: function() {
            Ext.create("Ext.Window", {
                title: 'aa',
                width: 150,
                closable: false,
                height: 100,
                html: 'b',
                ownerCt: this,
                modal: true
            }).show();
        }
    }]
}).show();

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

Мой вопрос, как сделать полный модальный? или если это невозможно сделать, как отключить главное окно, если появляется модальное окно, я использую функцию прослушивания шоу на модальном win, но проблема в том, что я не могу получить доступ к главному окну из этого прослушивателя.

Редактировать:

Это мой код: 

Ext.create("Ext.Window", {
    title: 'aa',
    width: 200,
    height: 150,
    html: 'a',
    maskOnDisable: false,
    tbar: [{
        text: 'aa',
        handler: function(a) {
            var parent = a.up("window");
            parent.disable();
            Ext.create("Ext.Window", {
                title: 'aa',
                width: 150,
                height: 100,
                html: 'b',
                listeners: {
                    scope: this,
                    "close": function() {
                        parent.enable();
                    },
                    /*
                    "blur" : function(){
                        this.focus()
                    }
                    */
                }
            }).show();
        }
    }]
}).show();

Хотя это не модальная концепция, но похоже, что я хочу сейчас, у меня возникла новая проблема, maskOnDisable не работает, и мне нужно событие, подобное blur, поэтому, если пользователь щелкает родительское окно, оно фокусируется назад. всплывающее окно. (я должен отправить это как новый вопрос?)

Ответы [ 2 ]

23 голосов
/ 25 января 2013

В эти дни вы устанавливаете модальное значение: true 

Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...
9 голосов
/ 19 мая 2011

Новый ответ:

Вы пытались disable() и enable() родительское окно соответственно? Я думаю, что это должно помочь вам остановить доступ к первому окну и в то же время позволить вашему пользователю получить доступ к главному меню приложения и экрану. Вот что я попробовал: 

var x = Ext.create("Ext.Window",{
    title : 'aa',
    width : 200,
    height: 150,
    html : 'a',
    tbar : [{
        text : 'aa' ,
        handler :function(){
            // I disable the parent window.
            x.disable();

            Ext.create("Ext.Window",{                   
                title : 'aa',
                width : 150,
                closable : false,
                height: 100,
                html : 'b'
                // You will need to enable the parent window in close handler of this window.

            }).show();
        }
    }]
}).show();

Когда вы отключаете окно, компоненты внутри окна отключаются, и вы не сможете даже переместить окно. Но в то же время у вас будет доступ к другим компонентам, таким как ваше главное меню, сетки на странице. У вас также будет доступ к новому окну. Теперь, чтобы он вел себя как модальный, вам нужно включить родительское окно при закрытии дочернего окна. Для этого вы можете использовать метод enable().

Я не могу придумать другого способа достичь того, что вы ищете.

Старый ответ:

Интересно, почему вы установили свойство ownerCt, относящееся к самому окну! Это твоя главная проблема. Удалив имущество, вы получите то, что ищете. Вот обновленный код: 

Ext.create("Ext.Window",{
    title : 'Extra window!',
    width : 150,                            
    height: 100,
    closable : false,                           
    html : 'A window that is a modal!',                         
    modal : true
}).show();

Была ли какая-либо причина в установке свойства ownerCt?

...