PDA

View Full Version : ExtJS 4 : Adding a button to a tab panel header



ramarajuv
12 Aug 2013, 8:10 PM
I am using ExtJS 4 and trying to add button on a tab panel header. Please have a look at this jsfiddle:


http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see it working fine with just the two tabs. Now, modify the same code by adding a tabBar as 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'
}]
}]
});


No Javascript error is thrown, but the button that I want to see to the right of the tab panel header is not coming up. Could anyone please help how I can bring up a button on the tab panel header?

scottmartin
13 Aug 2013, 6:13 AM
Please see the following:
http://www.sencha.com/forum/showthread.php?240094

Also note our new fiddle:
https://fiddle.sencha.com/

Regards,
Scott

sergiomichels
13 Aug 2013, 7:04 AM
Nice fiddle!! It will help a lot!

ramarajuv
13 Aug 2013, 7:07 AM
Thanks Scott !

I used your below example:

Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}],

listeners: {
afterrender: function(panel){
var bar = panel.tabBar;
bar.insert(2,[
{
xtype: 'component',
flex: 1
},
{
xtype: 'button',
text: 'button',
handler : function(){
alert('JSFiddle seems to be working better !');
}
}
]);
}
}
});



However, I would like to bring to your notice that Sencha's Fiddle is looking cool, it isn't actually convenient. It is pointing too many errors ( something like even a space is considered seriously ) and finally it didn't render me the screen. However, jsfiddle did render it !

scottmartin
13 Aug 2013, 7:10 AM
Please see the following:
https://fiddle.sencha.com/#fiddle/8c

It is most likely due to the Ext.require and onready() required.. do you include those?

Scott.

ramarajuv
13 Aug 2013, 7:43 AM
I now see it Scott.

May be I wasn't seeing it last time because I was not using the Ext.require and onReady? I modified your original code a little bit and used the one that I pasted in my comment above. But otherwise, I wasn't intending to criticise the Sencha Fiddle too much :) .. Just something I felt a bit annoying to stick to something as trivial as spaces while the other famous fiddle was taking them fine.

Thanks again for being of great help ! Appreciate it.

kanika.sud
9 Nov 2014, 8:42 PM
could you give the exact code WITH the onReady function please?

kanika.sud
9 Nov 2014, 11:05 PM
Not working for me.... works in the js fiddle but not in my code :(

Hacker-CB
18 Jan 2015, 10:26 AM
Is there more intellegent way to add button in ExtJs 5?

scottmartin
18 Jan 2015, 2:58 PM
For Ext5, You could use the tabBar config:



Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel',
tabBar: {

items: [{
xtype: 'button',
text: 'View Difference'
}]
},
items: [{
title: 'tab 1',
html: 'This is tab 1'

}, {
title: 'tab 2',
html: 'This is tab 2'

}]
}]
});

Hacker-CB
19 Jan 2015, 1:21 AM
How to make it right-alligned?

Nickf
28 Sep 2017, 6:25 AM
In case anyone else wanders into this question and is trying to right-align a button:


tabBar: {
items: [
{
xtype: 'tbfill' //right justifies button
},{
xtype: 'button',
text: 'Button Text'
}
]
}


Hope that helps someone else.