ExtJS 4: Add Button to Tab Bar Title

Question

I am using ExtJS 4 and trying to add a button to the title of a tab bar. Take a look at this jsfiddle:

http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see how it works just fine with only two tabs. Now modify the same code by adding a tabBar as shown below:

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 error is not thrown, but the button that I want to see to the right of the tab bar title is not suitable. Could you help me open the button on the tab?

Answer 1

If I understand your question, it seems you want the button to be in the tabBar itself, and not in its own toobar? If this is the case, you can use the following code available in this script.

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

you can use this:

 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' }] }] }); 

this will make buttons for your tab.