Ajout d'un onglet de texte non sélectionnable à Ext.TabPanel?

Question

J'essaye de créer un TabPanel qui a un en-tête de texte juste à côté des onglets. Autrement dit, au lieu de

|Tab1|Tab2|Tab3|Tab4|, je veux Text Here |Tab1|Tab2|Tab3|Tab4|

Le texte ne doit pas être sélectionné sous forme d'onglet, comment dois-je faire cela?

Actuellement, mon TabPanel est la suivante:

new Ext.TabPanel({ 
    id: 'lift-template', 
    defaults: { 
     items:[ 
      { 
       xtype: 'list', 
       store: myStore, 
       itemCls: 'my-row', 
       itemTpl: '<p><span class="blah">{variable}</span></p>' 
      } 
     ] 
    }, 
    items: [ 
     {title:'Week'}, 
     {title: '1'}, 
     {title: '2'}, 
     {title: '3'}, 
     {title: '4'} 
    ] 
}); 

Comment puis-je ajouter un élément qui n'est pas un vrai onglet, ou au moins désactiver l'activation?

Answer 1

slighly similaire à la réponse fournie par Seana, c'est celui modifié pour Sencha Touch (1.1).

Check out the example

/** 
* We will just need to extend the original tabpanel to 
* have the ability to create extra text node in front 
* of all the tabs (Check Ext.TabBar) 
*/ 
var FunkyTabPanel = Ext.extend(Ext.TabPanel, { 
    initComponent: function() { 

     //we need it to initialize the tab bar first 
     FunkyTabPanel.superclass.initComponent.call(this); 

     //Then we hack in our text node. You can add cls/style too 
     this.tabBar.insert(0, { 
      text: this.title, 
      style: 'color:#fff;' 
     }); 
    } 
}); 

Answer 2

Je n'essaierais pas de pirater une étiquette en utilisant la fonctionnalité d'un onglet. Tout ce que vous voulez est une étiquette, donc vous pouvez probablement regarder à travers le code source de TabPanel et de trouver un endroit conventient pour l'ajouter.

Je viens de regarder à travers la source de Ext.TabPanel (poste 3.3.1), et onRender est la méthode où la bande d'onglet est créé, donc ce que je ferais est de créer une extension personnalisée de Ext.TabPanel, appelez MyApp.WeeksTabPanel et override la méthode onRender pour ajouter votre étiquette après avoir appelé la méthode superclasse. On dirait que vous pourriez simplement ajouter une durée personnalisée en tant que premier enfant de this.stripWrap.

Quelque chose comme ceci:

MyApp.WeeksTabPanel = Ext.extend(Ext.TabPanel, { 

    onRender: function() { 
     MyApp.WeeksTabPanel.superclass.onRender.apply(this, arguments); 
     this.stripWrap.insertFirst({tag: 'span', html: 'Weeks:'}); 
    } 

});