how to make a full modal window in ext 4?

问题:

Like a window in microsoft OS (xp,vista, 7 etc)...

If a main window create a modal window, the user can't access the main window,
(including close and access the toolbar etc).

I want to make a similar one with extjs. This is my modal example :

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

The problem is, it just disable the main window's body, user still can access main toolbar, also for closing it.

My question is how to make full modal ? or if it can't be done, how to disable main window, if modal window is appear, I have use listener show on modal win, but the problem is i cant access main window from this listener.

Edit :

This is my code so far :

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

Although this is not modal concept, but it seem like what I want now, I have new problem, maskOnDisable is not works and I need an event like blur, so if user click parent window, it focus back to popup window. (should I post it as new question ?)

回答1:

New Answer:

Have you tried to disable() and enable() the parent window appropriately? I think that should help you in stopping access to the first window and at the same time allowing your user to access the main application menu and screen. Here is what I tried:

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

When you disable the window, the components within the window are disabled and you will not be able to even move the window. But at the same time, you will have access to other components like your main menu, grids on the page. You will also have access to the new window. Now, to make it behave like a modal, you need to enable the parent window when you close the child window. You can make use of the enable() method for that.

I cannot think of any other way to achieve what you are looking for.

---

Old Answer:

I wonder why you have set the ownerCt property referring to the window itself! That is your main problem. By removing the property you will achieve what you are looking for. Here is the updated code:

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

Was there any reason in setting the ownerCt property?

回答2:

These days you set modal: true

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