Change color of Sencha Touch Ext.TabPanel

Question

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

For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?

Thanks.

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.

Answer 2

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;