Блог

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

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

И я добавил прослушиватель в beforetabchange. При изменении значений в 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);
            }
        });
    }
}
});
  

Под этой TabPanel также есть GridPanel.
И это окно сообщения в плагине buttons работает нормально (панель вкладок становится серой, а окно сообщения появляется сверху), но второе, в плагине 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);
                        }
                    });
                }
            }
        })
    ]
});
});
  

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

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

решение

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

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

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

«Я думаю, проблема в том, что окно сообщения каким-то образом привязано к GridPanel, которая находится под TabPanel».

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

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

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

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

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

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

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

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

нажмите на элемент сетки- setTimeout(функция(){ Ext.MessageBox.alert(‘MessageBoxTitle’, ‘Подтвердить сообщение.’)}, 200);

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

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

Это должно заставить MessageBox отображаться сверху.

Посмотрите на четвертый пример на этой странице.

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