Добавить кнопку в заголовке панели вкладок в extjs

Question

Я добавил панель вкладок в Extjs. Когда я нажимаю на вторую вкладку, я хотел бы видеть компонент в области заголовка панели вкладок, с красной меткой, как показано на картинке.

Answer 1

Я не уверен, можно ли вводить кнопку внутри панели вкладок или нет. У меня есть альтернатива. Создайте плавающую панель с необходимой кнопкой внутри нее и покажите эту плавающую панель в нужном месте.

  showButtonNextToLastTab : function(){ 
       var me = this; 
       var lastTab = me.getLastTabInTabPanel(); 
       var tabWidth = lastTab.getWidth(); 
       var tabHeight = lastTab.getHeight(); 
       var btnContainer = Ext.getCmp('btnContainer'); 
       if(btnContainer == null) { 
        btnContainer = Ext.create('Ext.panel.Panel',{ 
         id: 'btnContainer', 
         cls: 'btnContainerCls', 
         floating: true, 
         shadow : false, 
         height : 50, 
         items : [ 
           { 
            xtype : 'button', 
            id : 'myRequiredButton', 
            text:'Button', 
            cls:'requiredBtnCls', 
            minWidth : tabWidth, 
            height : tabHeight 
           } 
           ] 
        }); 
       } 
       btnContainer.showBy(lastTab,'tl-tr',[-2,0]); 
      }, 

      getLastTabInTabPanel : function(){ 
       var me = this; 
       var tabPanel = Ext.getCmp('myTabPanel'); 
       if(tabPanel){ 
        var tabBar = tabPanel.getTabBar(); 
        var noOfTabs = tabBar.items.items.length; 
        return tabBar.items.get(noOfTabs-1); 
       } 
       return null; 
      } 

     destroyButtonContainerPanel : function(){ 
      var btnContainer = Ext.getCmp('btnContainer'); 
      if(btnContainer != null) 
       btnContainer.destroy(); 
     } 

Вызов showButtonNextToLastTab метод, если вы хотите, чтобы показать эту кнопку, чтобы показать и назвать destroyButtonContainerPanel метод, если вы хотите, чтобы скрыть эту кнопку.

Примечание: «myTabPanel» является идентификатором tabPanel, в который вы хотите вставить эту кнопку.

Смотрите, если это помогает ..

Answer 2

Для компонента tabpanel следует другое предложение:

Ext.application({ 
name : 'TabPanelHeaderButton', 

launch : function() { 

    Ext.create('Ext.tab.Panel', { 
     width: 400, 
     height: 400, 
     renderTo: document.body, 
     items: [{ 
      title: 'Foo' 
     },{ 
      title: 'Foo 1' 
     }], 
     tabBar: { 
       items: [{ 
        xtype: 'tbfill' 
       },{ 
        xtype: 'button', 
        text: 'Button', 
        padding: '3px', 
        margin: '2px 5px 2px 2px', 
        handler: function(){ 
         alert ('Button click') 

        } 
       }] 
     } 
    }); 

} 
});