View Full Version : (4.2) Trouble styling a tab bar within application

30 Apr 2013, 1:46 PM
I'm trying to style a tab bar from within my application. For now, I am doing it globally for all tab bars in my application by setting theme variables. It is not working at all.

I have put my variable settings in MyApp/sass/var/tab/Panel.scss. It seems this file is being ignored, or at least it's having no effect. Previously, I tried the same file contents in a custom theme and it worked fine. I also tried changing $base-color in MyApp/sass/var/view/Viewport.scss) and that worked fine too.

Am I putting the file in the wrong place or something? I'm stumped. Any thoughts?

Oh, here's a sample Panel.scss file that doesn't work:

$tab-font-size: 12pt;

8 May 2013, 9:01 AM
Do you have a packages folder from running:
sencha generate theme {my-custom-theme}

If you generate a theme package and point your app theme to your new {my-custom-theme} you should be able to put the "$tab-font-size: 12pt;" in packages/{my-custom-theme}/sass/var/tab/Panel.scss

Just to be safe I tested this just now while following the Theming guide (http://docs.sencha.com/extjs/4.2.0/#!/guide/theming) to make sure it worked and it worked for me.

*I used 4.2.0 and Cmd

8 May 2013, 9:57 AM
Yes, I could do what you're describing, but I was trying to follow a different part of the theming guide, altering my application without changing the theme. I've since been discouraged (by Sencha Support) from doing it this way, which has left me a bit confused.

In any case, defining a named UI for a tab bar inside the custom theme did *not* work in 4.2, but is now working for me using a beta build of 4.2.1. This has allowed me to target my change to a single particular tab bar, but it still forces me to use a custom theme.