ExtJS 4: Добавление кнопки в заголовок панели вкладок

Question

Я использую ExtJS 4 и пытаюсь добавить кнопку в заголовок панели вкладок. Пожалуйста, взгляните на этот jsfiddle:

http://jsfiddle.net/ramarajuv/Sadnj/7/. Вы можете видеть, как он работает нормально только с двумя вкладками. Теперь, изменять один и тот же код, добавив TabBar, как показано ниже: брошено

Ext.create('Ext.panel.Panel',{ 
    renderTo : Ext.getBody(), 
    id : 'testPanel', 
    height : 200, 
    width : 300, 
    items: [{ 
     xtype : 'tabpanel', 
     activeTab : 1, 
     tabBar:[{ 
      dockedItems:[{ 
       xtype: 'button', 
       text : 'Test Button' 
      }] 
     }],   
     items: [{  
      title: 'tab1' 
     },{     
      title: 'tab2' 
     }] 
    }] 
}); 

ошибка Нет Javascript, но кнопка, которую я хочу видеть справа от заголовка вкладки панели не подходит. Не могли бы вы помочь, как я могу открыть кнопку на панели вкладок?

Answer 1

Если я понимаю ваш вопрос, кажется, вы хотите, чтобы кнопка была в самом tabBar, а не в собственном toobar? Если это так, вы можете использовать следующий код, доступный в этой скрипке.

http://jsfiddle.net/Sadnj/15/

Ext.create('Ext.panel.Panel', { 
    renderTo: Ext.getBody(), 
    id: 'testPanel', 
    height: 200, 
    width: 200, 
    items: [{ 
     xtype: 'tabpanel', 
     activeTab: 1, 
     tabBar: { 
      items: [{ 
       xtype: 'tbfill' 
      }, { 
       xtype: 'button', 
       text: 'Test Button' 
      }] 
     }, 
     items: [{ 
      title: 'tab1', 
     }, { 
     title: 'tab2', 
     }] 
    }] 
}); 

Answer 2

вы можете использовать это:

Ext.create('Ext.panel.Panel',{ 
    renderTo : Ext.getBody(), 
    id : 'testPanel', 
    height : 200, 
    width : 200, 
    items: [{ 
     xtype : 'tabpanel', 
     activeTab : 1, 
     tbar:[{ 
       text : 'txtButton' 
     }], 
     items: [{  
      title: 'tab1' 
     },{     
      title: 'tab2' 
     }] 
    }] 
}); 

это сделает кнопки для tabpanel.