David Kaneda gives this talk.
CSS3, SASS and Compass make theming wicked easy.
www.sass-lang.com and www.compass-style.org are good resources to check out for details on those topics.
config.rb is the file you use to configure locations and themes for Sencha. SASS/Compass use Ruby to compile CSS. You can also set the output_style as compressed or expanded for production and development, respectively.
myapp.scss is the file you define your SASS. So define variables, import libs you’ll use and @include the components you’ll use. From there, you can define your custom rules.
Sencha has tons for variables. $base-color and $base-gradient are really cool to change theme colors across the board.
Helpful mixins include background-gradient, color-by-background, bevel-by-background and mask-by-background. The latter 3 will accept the background color and augment accordingly.
The “UI” attribute can be added to components that can allow you to customize. Buttons commonly use this to change the style of buttons (e.g. back/fwd, square, round, small, etc.). You can also customize your own buttons with a mixin as follows: @include sencha-button-ui(‘orange’,#ff8000, ‘glossy’) and to use in your component set the UI attribute to ‘orange’. Same with @include sencha-toolbar-ui and sencha-tabbar-ui.
Icons: over 300+ icons available. In SCSS use @include pictos-icon(‘refresh’) and then in the JS just use “xtype:’button’ iconCls: ‘refresh’ iconMask: true ui: drastic”.
Optimization tips: remove unused components (e.g., @include-top-tabs:false and/or comment components in .scss file), remove images, remove UIs and output_style to compressed.
From resources dir run compass compile scss to compile the sencha source. You compile after each scss change. There’s also a way to automate this Dave says.
styleHtmlContent: true controlled by x-html for custom styling of HTML attributes.
Loutilities 