View Full Version : Action button duplicates function of tabbar button

7 Jul 2010, 7:31 AM
I'm trying to have a regular button do the same thing as one of the tabbar buttons in the TabPanel I've created. When a tabbar button is tapped, the screen switches to a different 'card' and that button is highlighted. I want these same things to happen when the user taps a particular non-tabbar button. So on card 1 I've got a button docked to the bottom (just above the tabbar) and if this button is tapped I want the screen to animate to card 4 and the tabbar button #4 to become highlighted. I know its redundant to have a button that copies the functionality of a tabbar button, but that's the spec for this project.

Any help at all would be appreciated. I know how to create a handler for a control, but all I can do with it so far is change the text of a component, I don't know how to trigger events like this.

7 Jul 2010, 7:32 AM
Specifically, what's the problem?

You can create a named function and use it for the handler for both buttons.

7 Jul 2010, 7:35 AM
I know how to create a handler function and attach it to the button, but I don't know how to replicate the events triggered by tapping a tabbar button. How do I trigger the switching to a different card in the Panel? How to I set a particular tabbar button as highlighted? Can this all be done in one step or does it require a series of event calls in the handler function?

7 Jul 2010, 7:49 AM
Well, for example, lets take tabs2:

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
defaults: {
scroll: 'vertical'
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'

By setting the active tab it
a) Highlights the button
b) Changes the tab with the effect

Is that what you want to do?

7 Jul 2010, 7:58 AM
That's it!

My button handler function:

var buttonHandler = function (button, event) {

now sets the tabbar to tab #4 (I didn't know they were 0-indexed either). This is just what I was looking for.

Thank you for your help evant. I was having trouble finding what I needed through the API documentation. This should help me with future searches for other event handlers.

7 Jul 2010, 10:18 AM
Although not documented (yet), an even easier way to achieve this is


Any container with a card layout gets this setCard method.