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

Как окно в ОС 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();

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

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

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

Это мой код до сих пор:

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, поэтому, если пользователь щелкает родительское окно, он возвращается к всплывающему окну. (должен ли я опубликовать это как новый вопрос?)


modal-dialog extjs extjs4
person Egy Mohammad Erdin    schedule 19.05.2011    source источник
comment
взгляните на обновленный ответ.   -  person Abdel Raoof Olakara    schedule 23.05.2011
comment
@Abdel, спасибо за вашу помощь .. смотрите мое редактирование .. мне снова нужна небольшая помощь ..   -  person Egy Mohammad Erdin    schedule 25.05.2011

Ответы (2)


arrow_upward
9
arrow_downward

Новый ответ:

Вы пытались правильно 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?

person Abdel Raoof Olakara    schedule 19.05.2011
comment
нет,.. не так,.. мой вопрос не понятен??? у меня есть главное окно.. чем пользователь нажимает кнопку на панели инструментов.. всплывает новое окно.. я хочу, чтобы пользователь не мог получить доступ к главному окну.. поэтому мне нужно ownerCt указать, кто является родителем.. это как опция папки в проводник (окно), пользователь не может получить доступ к проводнику, пока опция папки не будет закрыта. - person Egy Mohammad Erdin; 19.05.2011

arrow_upward
24
arrow_downward

В эти дни вы устанавливаете modal: true

Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...
person emolaus    schedule 25.01.2013
comment
да, свойство модальной конфигурации — это то, что нужно :) Документ: docs.sencha.com/extjs/4.2.3/#!/api/Ext.window.Window-cfg-modal - person ArcanisCz; 24.10.2014