Question

我遇到了这样的问题：

TabPanel有两个标签。首先是FormPanel，第二个是GridPanel。

我已经在beforetabchange中添加了监听器。当FormPanel中的值发生变化时，应该出现Ext.MessageBox.cofirm并提出问题：“你想保存更改吗？”。

它出现在TabPanel下。

它不适用于任何类型的消息框。

这有点奇怪，因为当我点击此表单中的提交按钮时，会有等待消息框，保存更改后会有信息框。

有什么想法吗？

编辑

我已经从tabPanel和formPanel删除了所有配置集，这是第一个标签，所以一切都是默认的。消息框看起来像那样（现在）：

Ext.MessageBox.confirm('Title','message',Ext.emptyFn);

我认为问题在于消息框以某种方式绑定到tabPanel下的gridPanel。我已将插件添加到tabPanel，并在beforetabchange事件中显示此确认消息。有趣的是，我在插件中执行完全相同的代码，并在formPanel中添加提交按钮，并且一切都很完美。

编辑

new Ext.TabPanel({
activeTab: 0,
id: 'tabPanel_id',
items: [
    new Ext.form.FormPanel({
        cls: 'xf-windowForm',
        bodyCssClass: '',
        autoHeight: false,
        autoScroll: true,
        border: false,
        layout: 'form',
        buttonAlign: 'center',
        monitorValid: true,
        labelAlign: 'right',
        labelPad: 10,
        defaults: {
            msgTarget: 'under',
            anchor: '100%'
        },
        id: 'formPanel_id',
        title: translate('tab_title-general'),
        items: [
            new Ext.form.TextField({
                fieldLabel: 'label',
                name: 'name',
                id: 'id'
            })
        ],
        buttons: [
            new Ext.Button({
                text: 'save',
                type: 'submit',
                formBind: true,
                plugins: {
                    init: function (component) {
                        component.on({
                            click: function() {
                                Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
                            }
                        });
                    }
                }
            })
        ]
    }),
    new Ext.Panel()
],
plugins: {
    init: function(component) {
        component.on({
            beforetabchange: function() {
                Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
            }
        });
    }
}
});

此tabPanel下还有gridPanel。按钮插件中的此消息框工作正常（选项卡面板变为灰色，消息框显示在顶部），但第二个，在tabpanels插件中，在网格上添加另一个蒙版并显示在面板下方和网格上方。

编辑

Ext.onReady(function(){

new Ext.Window({
    initHidden: false,
    width: 700,
    title: 'WindowTitle',
    items: [
        new Ext.TabPanel({
            items: [
                new Ext.Panel({title: 'Title1'}),
                new Ext.Panel({title: 'Title2'})
            ],
            plugins: {
                init: function(component) {
                    component.on({
                        beforetabchange: function(t,c,n) {
                            Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component);
                        }
                    });
                }
            }
        })
    ]
});
});

这是发生问题的完整代码。窗口显示事件中的消息框显示正常，但在tabPanel中它位于窗口下方。

我正在研究FF 4.0.1，但在IE 8和Chrome 12中也会出现问题。我正在使用Ext JS 3.3.1。

溶液

必须降低窗口的z-index（即到7000，默认为9000）。要做到这一点，我正在使用Ext.WindowGroup。

windows = new Ext.WindowGroup();
windows.zseed = 7000;
//and in config properties in window:
manager:windows

感谢大家的帮助。

Answer 1

“我认为问题在于消息框以某种方式绑定到tabPanel下的gridPanel。”

根据源代码，MessageBox未绑定到现有面板，它是一个单独的并且基本上是创建渲染到主体的窗口的快捷方式：

http://dev.sencha.com/deploy/ext-3.3.1/docs/source/MessageBox.html#cls-Ext.MessageBox

Kevin认为z-index可能是罪魁祸首，因为我在过去修复了Ext.Notifications ux的z-index低于主要内容的问题。

尝试从控制台运行您的消息框调用，看看它是否出现。这将有助于确定您的等待消息框是否正在关闭确认消息框（请注意提到它是上面的单例）或奇怪的地方，您没有看到导致您的代码无法运行的其他一些javascript错误。然后，如果从控制台运行时没有看到消息框，请尝试isVisible（）api调用以查看是否认为正在显示它（这可能会将其缩小到css问题）

Answer 2

Ext MessageBox不会阻止您的代码，直到用户按照alert()的方式执行操作。结果，它将弹出消息框，然后继续呈现用户刚刚单击的新选项卡。也许当新选项卡呈现时，Ext窗口管理器将该窗口置于顶部，因为它最近呈现？

您可以尝试使用setTimeout在短暂延迟后显示消息框。这将使新标签有机会在顶部，然后消息框呈现，希望在所有内容之上，因为它是最新的。

Answer 3

setTimeout会起作用，就像

一样

页面按钮 - 点击 - 带网格的窗口 - 点击网格项 - ＆gt;顶部应该有一个消息框，但它在窗下，然后我试过

点击网格项目 - setTimeOut（function（）{Ext.MessageBox.alert（'MessageBoxTitle'，'确认消息。'）}，200）;

Answer 4

我使用了以下方法。它对我有用。

beforetabchange: function(tabpanel, newTab, oldTab){
        if (!tabpanel.allowAction){
          Ext.Msg.confirm('Confirm', 'Your Message',function(btn) {
             if (btn == 'yes') {
                /* logic*/
            tabpanel.allowAction = true;
               this.setActiveTab(newTab.id);
           }else{ /* logic */}

        });
            return false;
       }
       delete tabpanel.allowAction;
    }

Answer 5

Ext.create('Ext.window.MessageBox', { alwaysOnTop: true, closeAction: 'destroy' }).show({ title: 'Title', buttons: Ext.Msg.OK, message: 'Message' });

这应该使MessageBox显示在顶部。

请看这个页面的第四个例子。

http://docs.sencha.com/extjs/5.1.0/api/Ext.window.MessageBox.html

TabPanel下的Ext.MessageBox

5 个答案: