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

как окно в Microsoft ОС (ХР,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();

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

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

Edit:

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

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();

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

2 ответов


Ответ:

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


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

Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...