Ext.MessageBox under TabPanel

I got problem like this:

There is TabPanel with two tab. First is FormPanel, second is GridPanel.

And I've added listener to beforetabchange. When values in FormPanel are changed there should appear Ext.MessageBox.cofirm with question: 'Do you want save your changes?'.

And it's appear but under TabPanel.

It doesn't work with any type of message box.

This is little bit weird because, when I click on submit button in this form, there is wait message box and after changes are saved there is information box.

Any ideas?

edited

I've removed all config sets from tabPanel and formPanel which is first tab, so everything is default. Message box looks like that (right now):

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

I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel. I've added plugin to tabPanel and on beforetabchange event I show this confirm message. Funny thing is that I do exactly the same code in plugin which is added to submit button in formPanel and there everything works perfect.

edited

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

There is also gridPanel under this tabPanel. And this message box in buttons plugin works fine (tab panel becomes grey and message box appears on top), but the second one, in tabpanels plugin, add another mask on grid and shows under the panel and above the grid.

edited

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) 开发者_JAVA百科{
                    component.on({
                        beforetabchange: function(t,c,n) {
                            Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component);
                        }
                    });
                }
            }
        })
    ]
});
});

That's complete code where problem occurs. Message box in window show event is displayed ok, but in tabPanel it's under the window.

I'm working on FF 4.0.1, but problem occurs also in IE 8 and Chrome 12. I'm using Ext JS 3.3.1.

solution

z-index of windows must be decreased (ie. to 7000, default is 9000). To do that I'm using Ext.WindowGroup.

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

Thank's everyone for help.

"I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel."

MessageBox isn't bound to an existing panel, its a singleton and is basically a shortcut to creating a window rendered to the body, as per source code:

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

Kevin is on to something with the z-index being a likely culprit, as I've fixed issues in the past with the Ext.Notifications ux having a lower z-index than the main content.

Try running your messagebox call from the console and see if it appears. That will help determine if your wait messagebox is closing out the confirm messagebox (note the mention of it being a singleton above) or something odd where you're not seeing some other javascript error thats causing your code to not be run. Then, if you don't see the messagebox when run from the console, try the isVisible() api call to see if it thinks its being displayed (which will likely narrow it down to a css issue).

Ext MessageBox doesn't block your code until the user does something the way an alert() does. As a result, it's going to pop up the message box, and then proceed to render the new tab that the user just clicked on. Perhaps when the new tab renders, the Ext window manager is putting that window on top, since it rendered most recently?

You could try using setTimeout to display the message box after a short delay. That will give the new tab a chance to be on top, and then the message box renders, hopefully on top of everything, since it was the most recent.

setTimeout will work, there was same issue like

page- button - on click - window with grid - click on grid item->there should be a message box on top, but it was under the window, then i tried

click on grid item- setTimeOut(function(){ Ext.MessageBox.alert('MessageBoxTitle', 'Confirm message.')}, 200);

I have used following method. It is working for me.

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;
    }

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

This should make the MessageBox appear on top.

Look at the fourth example in this page.

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