Les éléments de la barre d'outils ajoutés/insérés dans Ext.ToolBar n'apparaissent pas sur la page

Question

J'ai un composant personnalisé qui étend un panneau. Le panneau a une barre d'outils supérieure avec une configuration de base. Je veux être en mesure d'ajouter des éléments au panneau dynamiquement après qu'il a été créé. Ces éléments devraient toujours arriver à la fin de l'ensemble principal des éléments de menu et avant le remplisseur qui pousse le bouton de déconnexion à l'extrême droite, donc j'ai écrit la fonction insertMenuItem pour saisir la position du "shunt" (le tbfill) et insérez le nouvel élément de la barre d'outils à cet emplacement. S'il ne trouve pas le "shunt", parce qu'il a été remplacé, il ajoute juste à la fin de la barre d'outils.

Cela semble fonctionner parfaitement. Si je regarde le "content" contentPanel je peux voir l'élément de menu inséré. Le problème vient avec l'affichage. Maintenant, je soupçonne que c'est une question de portée, je ne suis pas sûr de quoi, où, quand, comment ....: |

J'ai essayé this.doLayout(), topToolbar.doLayout() dans la fonction J'ai un doLayout() sur l'objet contentPanel après avoir appelé ma fonction, mais aucun d'entre eux n'a l'air d'aider.

AIDE! ;-D

Ci-dessous est ma classe étendue de Panel. Merci d'avance pour votre aide

Stephen

 

SOM.ux.contentPanel = Ext.extend(Ext.Panel, { 
    autoScroll:true 
    ,initComponent:function() { 
     var config = { 
      plugins:['dispatcher'] 
      ,contentEl : Ext.get('som-body') 
      ,tbar:{ 
        itemId:'contenttoolbar' 
        ,items:[ 
       { 
        xtype : 'button', 
        text: 'Dashboard', 
        handler: function(){ 
         document.location.href = '/' 
        } 
       },{itemId:'shunt',xtype: 'tbfill'},{ 
        xtype : 'button', 
        text: 'Logout', 
        handler: function(){ 
         document.location.href = '/admin.login.doLogout' 
        } 
       },{ 
         xtype : 'tbbutton', 
         text: 'Message', 
         scope: this, 
         handler: function(){ 
          this.publish('SOM.ux.Dashboard',{action:'doHelloWorld',params:{name:'Stephen'}}); 
         } 
        } 
       ] 
      } 

     }; // end of config 
     Ext.apply(this, Ext.apply(this.initialConfig, config)); 
     SOM.ux.contentPanel.superclass.initComponent.apply(this, arguments); 
    } 
    ,afterRender: function(){ 
     this.subscribe('SOM.ux.Toolbar'); 
     SOM.ux.contentPanel.superclass.afterRender.call(this); 
    } 
    ,onDispatchMessage: function(subject,message) { 
     if (message.action) { 
      this[message.action].call(this,message.params); 
     }  
     console.log('contentpanel doDispatch',subject,message); 
    } 
    ,insertMenuItem: function(itemObj){ 
     var topToolbar = this.getTopToolbar(); 
     var aItems = topToolbar.items; 
     var insertPos = aItems.indexOfKey('shunt'); 
     if (insertPos) { 
      console.log('using insert'); 
      topToolbar.insert(insertPos,itemObj); 
     } else { 
      console.log('using add'); 
      topToolbar.add(itemObj); 
     } 
     this.getTopToolbar().doLayout(); 
    } 

Answer 1

Assurez-vous que vous appelez insertMenuItemaprès la barre d'outils a rendu. itemObj (param) est-il une configuration Ext.Toolbar.Item?

Answer 2

Les travaux suivants:

var tb = new Ext.Toolbar({ 
    items : [{text : 'wtf'}] 
}); 

new Ext.Window({ 
    width : 300, 
    height : 100, 
    tbar : tb 
}).show(); 

(function() { 
    tb.add({text:'new btn'}); 
    tb.doLayout() 
}).defer(1500); 

Pour ajouter au commentaire de jonathan, seulement appeler doLayout après sa rendu.