Generate a theme with Sencha CMD

Posted on in Environment Ext JS Sass Sencha Sencha Touch

This guide will teach you how to generate a Sencha Theme with Sencha CMD, to start theming with SASS.

Prerequisites

  1. Make sure you have Sencha CMD installed. If you don't have Sencha CMD installed: See this blog post.
  2. Make sure you have SASS/Compass/Ruby installed. No? Check this blog post.

All applications start with a "default" theme. To create new themes, you can easily generate themes with Sencha CMD.

Generate your theme

  1. Navigate to your project with your console/terminal and type the following command:
    sencha generate theme MyThemeName
    This will generate for you the following folders:
    • [project]/resources/sass/MyThemeName
    • [project]/resources/theme/MyThemeName
    • [project]/resources/css/MyThemeName (after compiling the SASS file)

  2. After generating the theme, [project]/resources/sass/MyThemeName/config.rb is generated with the correct paths to all theme folders.
  3. From here you can start editing your SASS file.
  4. The next step is to build the image slices needed for IE browsers.

    This is done with the following command:

    sencha theme build MyThmeName

    This will slice all the images in the CSS folder. This approach reduces the size of the CSS file since all image paths are relative to the CSS file location.

  5. You can preview your theme in your browser: [project]/resources/theme/MyThemeName/theme.html

Do you want to know more about theming Sencha with SASS? Check this blog post.

Read more info about Theming with Sencha CMD? Check: http://docs.sencha.com/ext-js/4-1/#!/guide/command_theme