Change Color Sencha Touch Ext.TabPanel

Question

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

In ui you can specify, for example, color instead of dark and light? How can I make this a specific color or background image of our choice?

Thanks.

Answer 1

What you need to do is define a new ui type using SASS and COMPASS. So, you should be familiar with these structures. If you already installed them, and already know how to create a CSS application theme, 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 use some variables to set the desired style. More details:

• $ tabs-myUI: Is the base color for the user interface tabs "myUI".
• $ tabs-bar-gradient: Background gradient style for tab stripes.
• $ tabs-myUI-active: active color for the UI tab is light.

You can determine how many different user interfaces you want and use them in your code as follows:

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

This is the official Sencha way of doing this.

Hope this helps.

Answer 2

Give your tab or its children the cls attribute. This gives the html tag a class, so you can use it to style it in your CSS.

Obviously after that you will stylize it using something like:

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

Answer 3

@AndreaCammarata p>

I can change the color of the tab using your previous sass. But I have to change the active color 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' } ] }