如何在ext 4中做出完整的模态窗口？ [英] how to make a full modal window in ext 4?

问题描述

像微软操作系统中的窗口（xp，vista，7等）...

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)

我想用extjs做一个类似的东西..这是我的模式示例：

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 acces 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...

编辑：

这是我的代码到目前为止：

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

althougt这不是模态的概念，但它似乎是我想要的...

现在，我有新的问题， maskOnDisable 不工作，我需要一个类似 blur 的事件，所以，如果用户点击父窗口，它会重点回到弹出窗口...

（应该将其发布为新问题）

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

推荐答案

新的答案：

你尝试过 disable（） code> enable（）父窗口是否适当？我认为这应该可以帮助您停止访问第一个窗口，同时允许用户访问主应用程序菜单和屏幕。这是我试过的：

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

当您禁用窗口时，窗口中的组件将被禁用，您将无法使用移动窗口。但同时，您可以访问其他组件，如主菜单，页面上的网格。您还可以访问新窗口。现在，为了使其表现得像一个模态，你需要在关闭子窗口时启用父窗口。您可以使用 enable（）方法。

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.

旧答案：

我不知道为什么你设置了 ownerCt 属性引用窗口本身！那是你的主要问题。通过删除属性，您将实现您要查找的内容。以下是更新的代码：

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

是否有任何理由设置 ownerCt 财产？

Was there any reason in setting the ownerCt property?

这篇关于如何在ext 4中做出完整的模态窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！