如何在 ext 4 中制作完整的模态窗口？

Posted 2023-02-26

【中文标题】如何在 ext 4 中制作完整的模态窗口？

【英文标题】：how to make a full modal window in ext 4?

【发布时间】：2011-05-19 04:42:14

【问题描述】：

就像 microsoft OS (xp,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();

问题是，它只是禁用了主窗口的主体，用户仍然可以访问主工具栏，也可以关闭它。

我的问题是如何制作完整的模态？或者如果它不能完成，如何禁用主窗口，如果出现模态窗口，我在模态win上使用监听器显示，但问题是我无法从这个监听器访问主窗口。

编辑：

这是我目前的代码：

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 这样的事件，所以如果用户点击父窗口，它会重新聚焦弹出窗口。 （我应该将其作为新问题发布吗？）

【问题讨论】：

看看更新后的答案。

@Abdel，感谢您的帮助.. 看看我的编辑.. 我再次需要一点帮助..

【参考方案1】：

这些天你设置了 modal: true

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

【讨论】：

是的，模态配置属性是可行的 :) 文档：docs.sencha.com/extjs/4.2.3/#!/api/Ext.window.Window-cfg-modal

【参考方案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 属性有什么原因吗？

【讨论】：

不，.. 不是那样，.. 我的问题不清楚吗？？？我有一个主窗口.. 用户单击工具栏按钮.. 它弹出一个新窗口.. 我希望用户无法访问主窗口.. 所以我需要ownerCt 指定谁是父级.. 它喜欢“文件夹选项”在“资源管理器”（窗口）中，用户无法访问资源管理器，直到文件夹选项关闭..