Change color of Sencha Touch Ext.TabPanel

Question

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


        

Answer 1

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.