ExtJs Tabpanel Close Event с закрывающимися вкладками

Слушатель, который я настроил, похоже, не срабатывает. Вот мой код:

  new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>"
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            },
            beforeclose: function(element) {
                console.log('closing');
            }
        }
    });

Прежде чем добавить триггеры смены вкладок, сделайте это, написав журнал на консоли. Но перед закрытием этого не происходит.

Я также пытался поместить его в элемент Tabpanel, тоже не работает.

Как правильно добавить событие закрытия в TabPanel?


javascript events extjs tabpanel
person oneofakind    schedule 23.04.2014    source источник
comment
компонент tabpanel не имеет события beforeclose, если только это не closable: true. вы можете попробовать beforeremove. см. мой ответ ниже.   -  person Geoman Yabes    schedule 18.09.2018

Ответы (3)


arrow_upward
1
arrow_downward

Чтобы получить событие закрытия элементов, добавьте прослушиватель к этому элементу.

Скрипка здесь: https://fiddle.sencha.com/#fiddle/59f

person newmount    schedule 23.04.2014

arrow_upward
0
arrow_downward

Какую версию библиотеки вы используете? Обратите внимание, что событие beforclose доступно с версии 2.3.0.

Это работает для меня, когда я слушаю событие для элемента, а не для всей панели

new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>",
            listeners:{
                'beforeclose': function(){console.log('closed')}
            }
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            }
        }
    });
person Daydreaming Duck    schedule 23.04.2014
comment
Его Extjs 2.2. Да, это динозавр. Давно собирался обновиться, но времени нет. А у вас нет параметра для слушателя в айтеме? оно работает? - person oneofakind; 23.04.2014
comment
Боюсь, событие beforeclose доступно с версии 2.3.0. ExtJS — это фреймворк javascript, поэтому он следует правилам javascript. Если вам не нужны параметры - не присылайте. - person Daydreaming Duck; 23.04.2014
comment
Марио умер музыка Вот и все, пришло время для обновления. - person oneofakind; 23.04.2014

arrow_upward
0
arrow_downward

Начиная с Extjs 2.3.0, tabpanel имеют событие beforeclose:

перед удалением( this, component, eOpts )

Срабатывает до того, как любой Ext.Component будет удален из контейнера. Обработчик может вернуть false, чтобы отменить удаление.

Доступно с: 2.3.0

Параметры

  • это: Ext.container.Container
  • component : Ext.Component Удаляемый компонент
  • eOpts : Object Объект опций, переданный Ext.util.Observable.addListener.

поэтому просто добавьте слушателя в свой tabpanel:

listeners: {

    beforeremove: function (panel, item, eOpts) {
        console.log(item); // the tab to be removed
    }
 . . . . 
}
person Geoman Yabes    schedule 03.10.2017