ExtJs Tabpanel Fermer l'événement avec des onglets pouvant être fermés

Question

L'écouteur que j'ai configuré ne semble pas déclencher. Voici mon code:

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

Le beforeadd déclenche un tabchange et le faire en écrivant un journal sur la console. Mais, le beforeclose ne fait pas.

J'ai également essayé de le mettre à l'intérieur de l'élément du Tabpanel, ne fonctionne pas non plus.

Quelle est la bonne façon d'ajouter un événement de fermeture dans le TabPanel?

Answer 1

Pour obtenir la clôture d'un événement, ajoutez un écouteur à cet élément.

Fiddle ici: https://fiddle.sencha.com/#fiddle/59f

Answer 2

Quelle est la version de la bibliothèque que vous utilisez? Notez que beforclose event disponible depuis 2.3.0.

Il fonctionne pour moi quand je l'écoute événement pour l'article, pas panel

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

Answer 3

Depuis Extjs 2.3.0, tabpanel s ont un événement beforeclose:

beforeremove (this, component, eOpts)

Tire avant le Ext.Component est supprimé du conteneur. Un gestionnaire peut retourner false pour annuler la suppression.

Disponible depuis: 2.3.0

Paramètres

• ceci: Ext.container.Container
• composant: Ext.Component Le composant étant retiré
• eOpts: Object Les options objet passé à Ext.util.Observable.addListener.

donc juste ajouter un écouteur dans votre tabpanel:

listeners: { 

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