Change color of Sencha Touch Ext.TabPanel

Question

new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: \'slide\',
            ui: \'dark\',
            items: [home, about]
        });


        

Answer 1

Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.

Obviously after this, you would style it using something like:

background-image: url(...);
background-color: pink;

Answer 2

@AndreaCammarata

I'm able change the tabpanel Color using your above sass. But I'm to change the active colour of the tabs. Please find below my code

@include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);

VIEW:

config : {
style: "background-color: white",
     ui: 'tabcolour',
    tabBar : {

    ui: 'tabcolour',
        layout : {
            pack : 'center'
        }
    },
    layout : {
        type : 'card',
        animation : {
            type : 'fade'
        }
    },

    items : [{
            title : 'Descrption',
            xtype : 'item_description'
        },{
            title : 'Photos',
            xtype : 'Item_Photos',
        },  {
            title : 'Comments',
            xtype : 'item_add_viewcomment'
        }, {
            title : 'Videoes',
            xtype : 'item_video'
        }
    ]
}

Answer 3

What you need to do is to define a new ui type using SASS and COMPASS. So, you have to be familiar with these frameworks. If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui

@include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);

As you can see I'm using some variables to set the wanted style. In details:

• $tabs-myUI: Is the Base color for "myUI" UI tabs.
• $tabs-bar-gradient: Is The Background gradient style for tab bars.
• $tabs-myUI-active: Is the Active color for "light" UI tabs.

You can define how many different UI you want and use them in your code in the following way:

new Ext.TabPanel({
        fullscreen: true,
        cardSwitchAnimation: 'slide',
        ui: 'myUI',
        items: [home, about]
    });

This is the official Sencha way to do it.

Hope this helps.