Theming in Extjs (Part 2)

Here's part 2!

Changing global CSS themes is nice, but we want more control.

A note: !default makes your css declaration the "earliest" declaration.

Also, you don't actually need to perform "sencha app build"s every time.

sencha ant sass

should be sufficient to reflect changes in your scss files and generate the css.

Custom Component ui's

Every component in the Ext JS framework has a ui configuration (which defaults to "default"). (Used in the to create different types of button types in ST.)

The ext-theme-neutral theme includes SASS mixins for many different Ext JS Components. You can call these mixins to generate new UIs for Components. These mixins go under the "src" folder.

@include extjs-panel-ui(
    $ui-label: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

This mixin call produces a new Panel UI named "highlight-framed". To use, configure a Panel with "highlight" as its ui property (the "-framed" suffix is added to the UI of a panel when you set the frameconfig to true).

Again, remember to build the app to see the reflected changes.

While UI mixins are a handy way to configure multiple appearances for a component, they should not be overused. Because each call to a UI mixin generates additional CSS rules, gratuitous calls to UI mixins can produce an overly large CSS file.

Changing Images

Place the desired image in "my-custom-theme/resources/images/" and give it the same name as the image it is intended to override. For example, let's change the info icon of the MessageBox component. Save the following image as "packages/my-custom-theme/resources/images/shared/icon-info.png"

Now modify your test application to show a MessageBox that uses the custom icon.

Style for App-Specific Classes

Go to ".sencha/package/sencha.cfg", and set this as blank:

package.sass.namespace=

With this set, the file you need to create to correspond with Ext.panel.Panel is "sass/src/Ext/panel/Panel.scss".

Similarly, make "sass/src/MyApp/etc/etc.scss" to customize app-specific classes.

App-level Styling

Styling that is not shared between applications belongs in the application itself, not in the theme. The application acts as the final level in the theme hierarchy. Applications can change theme variables, and they can add their own custom variables and rules for styling the application's views.

Simply use "theme-demo-app/sass/var/view/Viewport.scss"!

Again, you need to build the app again for the changes to take effect.

Also, notice that we use Viewport.scss not Component.scss. This is because Component.js class is not necessarily called in the application

Notice how we did not use !default when setting the $base-color variable. !default is used for setting variables in themes, because those theme variables might need to be overridden in a derived theme, or in an application. !default is not needed here because the application is the end of the line in the theme inheritance tree.

CSS style rules for your application's views should go in the app's "sass/src/" directory in a scss file that has the same path and name as the view it is styling.

Final notes:

• I think you're supposed to perform an "app refresh" everytime you perform a "package build".
• Note: we skipped a section on creating sprites for legacy browsers and performing overrides... Check the original doc for more.
• I don't really know what the section on "Adding Custom Utility SASS" is about...
• I don't look at app migration from earlier versions of Extjs
• Didn't look at section "Organization of Generated SASS"