PDA

View Full Version : ExtJs 4.1 - tbar of tabpanel displays below the tab bar with tabposition as top



netemp
20 Jun 2012, 7:04 AM
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
20 Jun 2012, 7:08 AM
If you need a toolbar above the tabs you need to wrap it in another container that has a toolbar.

scottmartin
20 Jun 2012, 7:57 AM
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
26 Jun 2012, 4:57 AM
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
26 Jun 2012, 5:06 AM
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
27 Jun 2012, 7:04 AM
Thanks Evant, will put this up and test.

karthikakd
26 Aug 2013, 12:35 AM
Hi All,
I'm new to Extjs. I want to create a panel in which I want a top toolbar,bottom toolbar and in the body section I need to add a Map.
I tried out the examples in the site.but I'm not getting the correct one.Can any one suggest me.plz..Its urgent

KK

Tim Toady
28 Aug 2013, 4:58 AM
In the future, create your own thread rather than posting in an old thread.

If you haven't figured it out yet, it is not very difficult to have multiple toolbars. You can use the dockedItems (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems)config or the tbar (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-tbar)and bbar (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bbar)config on a panel. I don't know what your map is, but it will need to be some sort of component to participate in the layout system.

See the last panel in this example
http://docs.sencha.com/extjs/4.2.1/#!/example/toolbar/vertical-toolbars.html