View Full Version : TabPanel background colour

14 Feb 2011, 12:28 AM
Hi there,

I have created a tabPanel which contains 5 tabs linking to 5 different panels:

i can set all 5 panels' background by doing this on the tabPanel:
style : 'background-color:black !important;

but I want to be able to set the background color for each individual panels by doing this to within the panel:

app.views.measurePanel.body.setStyle('background-color:black !important;');

but it doesn't work?

Could someone help please?


14 Feb 2011, 3:23 AM

I have a similar situation for the app I'm working on, but I used a different approach.

I have a Ext.TabPanel object that is the main container. Using the items property, I add to it an array of objects, like this:

var tabBarItems = [homePanel,savedItemsPanel, morePanel];

var tabpanel = new Ext.TabPanel({
items: tabBarItems,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'

The homePanel, savedItemsPanel and morePanel are created before the tabBarItems array, either as TabPanel or Carousel type. Doing this allows me to set a custom CSS class for each:

var savedItemsPanel = [{
xtype: 'tabpanel',
title: 'News',
cls: 'card3',
Not sure if this is the best solution, maybe this can be optimized further.

14 Feb 2011, 5:56 AM

thanks for the reply. could I just want to clarify something, are the followings true?

1a) TabBar represent the buttons that you can select at the bottom to switch to different TabPanel
1b) TabPanel is the panel that gets displayed for each of the button

or is it

2) TabPanel is the container which contains TabBar and any panels you defined in the items tag?

if 2 is true, does that mean, there is a panel for each button is automatically generated when the TabPanel is created?

if that's the case, I need to change the style of the TabPanel's individual items' style?

I am sorry, I really can't get my head round it just yet :(


14 Feb 2011, 6:47 AM
The correct version is 2).

TabPanel is the general container that includes both the TabBar and the items. The TabBar is generated depending on the items, meaning each item will have a corresponding button in the TabBar.

The items can be either simple panels, tab panels, carousels or whatever type of object you want to use. From what I know, the panels are not generated by Sencha, you should create them.

In your case, I would use Ext.TabPanel as the main container, and for each of the 5 items I would use a Ext.Panel or another simple container.

For each Ext.Panel you can also specify the icon which will appear in the TabBar by using the iconCls property and also the css class that you want to apply to this particular item:

var my_panel = new Ext.Panel({
title: 'Home', // text that will appear in the TabBar under the icon
iconCls: 'home', // default class from Sencha that displays the home icon
cls: 'card1' // custom css class for the panel

14 Feb 2011, 8:52 AM
thanks for getting back to me. Just a final question on this.

If version 2 is correct and I have a panel called mypanel:

app.views.mypanel = Ext.extends("app.views.mypanel", Ext.Panel...
cls: '...(e.g. backgroup: white)';

changeColor: function()
//I want to change the color of the panel's background here


how do I change the color of the panel?
I have tried app.views.mypanel.setStyle(....) and it didn't work.



15 Feb 2011, 12:20 AM
Unfortunately so far I haven't played much with the styles properties on panels, so I'm not sure what to tell you on this problem.

From what I saw in the documentation (http://dev.sencha.com/deploy/touch/docs/), the Ext.Panel object doesn't have a setStyle method, but it does have 2 other methods that might be useful: removeCls() and addCls(). My guess is that you have to use class names which are created in the stylesheet, not inline styling.

Again, I'm just guessing here, so if you do find a solution that works, please let me know.