Extjs, Comment supprimer le contenu du panneau à onglets

Question

Je souhaite détruire le contenu du panneau à onglets car lorsque j'ouvre à nouveau le panneau, il reste le contenu avant. donc ça montre 2 même contenu. Donc, je veux mettre le code pour détruire le contenu des onglets dans le gestionnaire d'événement beforeclose.

et j'ai essayé comme ça,

tempTab.on('beforeclose',function(obj){ 
     this.items.each(function(c){this.remove(c)}); 
}); 

mais il ne fonctionne pas.

Quelqu'un peut-il aider?

source:

ManuBar Zone (MENU)

menubar.add({ 
    text : 'Administrator', 
    iconCls : 'plugin', 
    menu : { 
    items : [ 
     { 
     text : 'Menu Management', 
     id : 'menuManagement', 
     iconCls : 'tabs', 
     url : 'main/test2', 
     handler : onMenuClick 
     },{ 
     text : 'User Management', 
     id : 'useManagement', 
     iconCls: 'user', 
     url : 'main/test', 
     handler : onMenuClick 
     }] 
    } 
}) 

Manu Handler

function onMenuClick(item) { 

    if(!Ext.getCmp('tab_'+item.id)){ 
    var tempTab = Ext.getCmp('mainTabPanel').add({ 
     id : 'tab_'+item.id, 
     margins : '0 5 5 0', 
     deferredRender : false, 
     closable : true, 
     title : item.text, 
     plain : true, // 
     defaults : {autoScroll : true}, 
     autoLoad : { 
     url : '/ext/main/test2/', 
     scripts : true 
     }, 
     listeners : { 
     'beforeclose' : function(){ 
      alert(this.items.get(0).id); // output : testPanel 
      this.removeAll(); 
       alert(this.items.get(0).id); // output : undefined 
     } 
     } 
    }); 

    tempTab.on('beforeclose',function(){ 
     //console.log(this); 
     this.removeAll(); //////////////////////////////////// 
    }); 
    Ext.getCmp('mainTabPanel').setActiveTab(tempTab); 

    }else { 
    var tempTab = Ext.getCmp('tab_'+item.id); 
    Ext.getCmp('mainTabPanel').setActiveTab(tempTab); 
    } 
} 

et contenu (test2.php) (il charge à l'aide autoLoad et scripts : true)

test = function(){ 
return { 
    init : function() { 
    Ext.QuickTips.init(); 
    var app = new Ext.Panel({ 
     id : 'testPanel', 
     html : 'My Second Panel' 
    }); 

    var tab = Ext.getCmp('tab_menuManagement'); 
    //app.relayEvents(tab, ['activate', 'deactivate', 'beforeclose']); 
    tab.add(app); 
    tab.doLayout(); 

    tab = null; app = null; 
    } 
} 
}(); 


Ext.onReady(test.init, test, true); 

Je pense que l'élément a bien été supprimé. mais encore quand vous fermez et ouvrez à nouveau l'onglet. il montre 2 mêmes contenus.

Mon deuxième panneau Mon deuxième panneau

Je ne sais pas ce qui est mal ....

--- Mise à jour ---

J'ai changé le fichier test2.php comme ce

var tab = Ext.getCmp('tab_menuManagement'); 
tab.removeAll(); // I added 
tab.add(app); 
tab.doLayout(); 

puis cela fonctionne. C'est étrange. avant de fermer exactement, il a été retiré. mais comment encore en vie .... ?? quelqu'un aide?

Merci!

Answer 1

essayer de

tempTab.on('beforeclose',function(obj){ 
    this.removeAll(); 
}); 

Note:

removeAll([Boolean autoDestroy]) : Array 
*Removes all components from this container*. 

Answer 2

Vous utilisez des mauvaises pratiques. Par exemple:

variabile.on('event', handler, scope) 

cela laisse variable en vie car il est un événement non géré (non géré par poste, car il est géré par vous). Si vous écoutez manuellement un événement, vous devez le désinstaller avant de détruire variable. Ou si vous êtes comme moi (paresseux :-) utilisez simplement this.mon.

Une autre mauvaise chose est Ext.getCmp (et id) - il devrait être utilisé uniquement à des fins de débogage, pas pour le développement. Quand j'ai commencé avec Ext j'ai utilisé des identifiants et j'ai eu des problèmes très bizarres avec TabPanel quand j'ai créé plusieurs instances d'entre eux.