如何在 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 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.

这是我目前的代码:

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 这样的事件，所以如果用户点击父窗口，它会聚焦回到弹出窗口.(我应该把它作为新问题发布吗?)

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

推荐答案

新答案:

您是否尝试过适当地disable() 和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屋！