Ext.MessageBox под TabPanel

Question

У меня проблема такая:

Есть TabPanel с двумя вкладками.Первый - это FormPanel, второй - GridPanel.

И я добавил слушателя перед обменом.Когда значения в FormPanel изменяются, должен появиться Ext.MessageBox.cofirm с вопросом: «Вы хотите сохранить свои изменения?».

И он появляется, но в TabPanel.

Это не такработать с любым типом окна сообщения.

Это немного странно, потому что, когда я нажимаю кнопку отправки в этой форме, появляется окно сообщения ожидания, а после сохранения изменений появляется информационное окно.

Есть идеи?

отредактировано

Я удалил все наборы настроек из tabPanel и formPanel, которые являются первой вкладкой, так что все по умолчанию.Окно сообщения выглядит так (прямо сейчас):

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

Я думаю, проблема в том, что окно сообщения каким-то образом привязано к gridPanel, который находится под tabPanel.Я добавил плагин в 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);
            }
        });
    }
}
});

Естьтакже 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);
                        }
                    });
                }
            }
        })
    ]
});
});

Это полный код, в котором возникает проблема.Окно сообщения в окне show event отображается нормально, но в tabPanel оно находится под окном.

Я работаю на FF 4.0.1, но проблема возникает также в IE 8 и Chrome 12. Я использую ExtJS 3.3.1.

решение

z-индекс окон должен быть уменьшен (т.е. до 7000, по умолчанию 9000).Для этого я использую Ext.WindowGroup.

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

Спасибо всем за помощь.

Answer 1

"Мне кажется, проблема в том, что окно сообщения каким-то образом привязано к gridPanel, который находится под tabPanel."

MessageBox не привязан к существующей панели, он является одиночным и в основном является ярлыкомсоздание окна, отображаемого в теле, в соответствии с исходным кодом:

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

Кевин занят чем-то с вероятным виновником z-index, поскольку я исправил проблемы впрошлое с UX Ext.Notifications, имеющим более низкий z-индекс, чем основное содержимое.

Попробуйте запустить вызов вашего сообщения из консоли и посмотрите, появится ли он.Это поможет определить, закрывает ли ваше окно сообщений ожидания окно сообщений подтверждения (обратите внимание на упоминание о том, что оно является одиночным значком выше), или что-то странное, когда вы не видите какой-либо другой ошибки JavaScript, из-за которой ваш код не запускается.Затем, если вы не видите окно сообщения при запуске из консоли, попробуйте вызов API isVisible (), чтобы увидеть, если он думает , что он отображается (что, вероятно, сузит его до проблемы css).

Answer 2

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

Answer 3

Я использовал следующий метод.У меня это работает.

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 4

setTimeout будет работать, была такая же проблема, как и

страница - кнопка - при нажатии - окно с сеткой - нажмите на элемент сетки -> должно быть окно сообщения сверху, но оно было под окном, затем я попытался

щелкнуть элемент сетки setTimeOut (function () {Ext.MessageBox.alert ('MessageBoxTitle', 'Confirm message.')}, 200);

Answer 5

Ext MessageBox не блокирует ваш код, пока пользователь не сделает что-то, что делает alert().В результате появится всплывающее окно с сообщением, а затем перейдет к отображению новой вкладки, на которую пользователь только что нажал.Возможно, когда рендерится новая вкладка, диспетчер окон Ext помещает это окно поверх, так как оно рендерилось совсем недавно?

Вы можете попробовать использовать setTimeout для отображения окна сообщения после небольшой задержки.Это даст новой вкладке шанс оказаться сверху, а затем окно сообщения отобразится, надеюсь, поверх всего, поскольку оно было самым последним.