Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?)

like image 841
Egy Mohammad Erdin Avatar asked May 19 '11 04:05

Egy Mohammad Erdin


1 Answers

These days you set modal: true

Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...
like image 88
emolaus Avatar answered Oct 05 '22 09:10

emolaus