View Full Version : Tabs as Buttons

6 May 2010, 5:28 AM
Question: We're looking to use the TabPanel, however, we want to render the tabs to look like buttons rather then tabs. So it would appear to be buttons on the top row, rather then the Tabs. They would behave and have the same onclick event as the tabs. I was wondering if anyone out there has done this before?

6 May 2010, 6:16 AM
I haven't done this myself but I think you can take two approaches:

- custom styling
Use your own custom css classes to style the tab buttons.

- write a custom tabpanel
Use the card layout http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout?class=Ext.layout.CardLayout to and dynamically add buttons in a basic panel above.

If you only need this once you can save some time on writing the custom tabpanel and add the card layout and buttons manually.

6 May 2010, 6:23 AM
The only thing about building out a CardLayout is then I have to build out the plumbing for the button interactions with the panels themselves. Since this is part of the TabPanel, I was hoping to leverage that functionality. Seems like the css approach might be more ideal. Do you know of anyone who has put together a style sheet for something like this?

6 May 2010, 6:29 AM
in the ext package (http://www.extjs.com/products/js/download.php)

go to: resources\css\visual\

tabs.css has all the css for the tabs
the file button.css has the original button css for reference

have fun!

in the