ExtJs 4.1 - tbar of tabpanel displays below the tab bar with tabposition as top

[netemp]

If in a tabpanel, we provide a tbar and also keep tabposition as top, then the tbar gets displayed below the tabbar as shown in the attached screenshot.

How to correct this and get the tbar at top?

Following is a small test case representing such a behaviour:



Ext.onReady(function(){

new Ext.Viewport({
layout:"fit",
renderTo:Ext.getBody(),
items:[{
xtype: 'tabpanel',
id: 'mainTab',
activeTab: 0,
tabPosition:'top',
tbar: [{
text:"Documentation",
menu:[{
"text": "Vessel Documentation",
"id":"idVesselDocumentation",
menu:[{
text:"Application For Berthing",
id:"idApplicationForBerthing",
handler:function(){
Ext.getCmp('mainTab').add({
xtype:"panel",
title:"Application For Berthing",
items:[{
xtype:"textfield",
fieldLabel:"Hello"
}]
});
}
},{
text:"Berthing Monitoring"
},{
text:"VIA Generation"
},{
text:"ISPS Registration"
},{
text:"Voyage To Port Rotation"
}]
},{
"text": "Customer Documentation",
"id":"idCustomerDocumentation",
menu:[{
text:"Party Master"
},{
text:"Party Role Mapper"
},{
text:"Consortium Master"
},{
text:"Special Agreement"
}]
}]
},{
text:"Container"
},{
text: "Masters"
}],
items:[
{
title:'First Tab',
html:'Content of the First Tab'
},
{
title:'Second Tab',
html:'Content of the Second Tab'
},{
title:'Third Tab',
html:'Content of the Third Tab'
}
]
}]
});
});



36384

[Tim Toady]

If you need a toolbar above the tabs you need to wrap it in another container that has a toolbar.

[scottmartin]

It is working as you instructed it to do:



xtype: 'tabpanel',
id: 'mainTab',
activeTab: 0,
tabPosition:'top',
tbar: [{ ... }]


You placed it as an object of tabpanel

As Tim explained, create a toolbar above the tabpanel.

Scott.

[netemp]

Thanks for the post Tim and Scott. We too also used a panel to add tbar above tabpanel, but the only issue this leads to is an extra layer which gets added to layout in form of the panel.

Thought there could be some other way out for this. But thanks for your time and sharing that its the only way out.

[evant]

Or...



Ext.require('*');
Ext.onReady(function() {

new Ext.Viewport({
layout: "fit",
items: [{
xtype: 'tabpanel',
id: 'mainTab',
activeTab: 0,
tabPosition: 'top',
tbar: {
weight: -100,
items: [{
text: "Documentation",
menu: [{
"text": "Vessel Documentation",
"id": "idVesselDocumentation",
menu: [{
text: "Application For Berthing",
id: "idApplicationForBerthing",
handler: function() {
Ext.getCmp('mainTab').add({
xtype: "panel",
title: "Application For Berthing",
items: [{
xtype: "textfield",
fieldLabel: "Hello"
}]
});
}
}, {
text: "Berthing Monitoring"
}, {
text: "VIA Generation"
}, {
text: "ISPS Registration"
}, {
text: "Voyage To Port Rotation"
}]
}, {
"text": "Customer Documentation",
"id": "idCustomerDocumentation",
menu: [{
text: "Party Master"
}, {
text: "Party Role Mapper"
}, {
text: "Consortium Master"
}, {
text: "Special Agreement"
}]
}]
}, {
text: "Container"
}, {
text: "Masters"
}]
},
items: [{
title: 'First Tab',
html: 'Content of the First Tab'
}, {
title: 'Second Tab',
html: 'Content of the Second Tab'
}, {
title: 'Third Tab',
html: 'Content of the Third Tab'
}]
}]
});
});

[netemp]

Thanks Evant, will put this up and test.