View Full Version : TabPanel with a button floated to the right

29 Apr 2012, 2:19 AM
Hi there,

I have a seemingly simple (in regular HTML/CSS) layout where I need to have a TabPanel which contains 3 Tabs, followed by a floating button to the right which persists across all tabs. So for example:

Tab 1 | Tab 2 | Tab 3 | Space until the end of the page | Button
[ Content of selected tab]

Is there any example code that achieves this scenario? Should I be using the "layout" configuration somehow and elaborately place my button within a cell? Or do I need to use other trickery, such as absolute positioning and then custom CSS?

29 Apr 2012, 6:00 AM
Have a look at an example:

Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width : 400,
height : 200,
tabBar : {
items: [{
xtype: 'tbfill'
xtype: 'button',
text: 'button'
items : [{
title: 'tab1'
title: 'tab2'

Also have a look at my simple tabpanel plugin Its.tab.plugin.Tool (http://www.sencha.com/forum/showthread.php?176963-Its.tab.plugin.Tool) that may suit your need.

29 Apr 2012, 6:39 AM
Thanks! That's pretty awesome. Is there any way to get rid of the styling that it automatically attaches (your plugin that is)?