Sencha Cmd

Sencha Cmd is a command line tool provided by Sencha for creating, building, packaging, and deploying Sencha projects. You can create an Ext JS 4 project, package it, and deploy it to production using Sencha Cmd. You can download Sencha Cmd from http://www.sencha.com/products/sencha-cmd .

Sencha Cmd is also used to build custom themes. You can play with the SCSS files and run them using Sencha Cmd. Sencha Cmd internally uses the SASS and Compass libraries and generates CSS files. It is bundled with Compass and SASS libraries also known as gems in the Ruby world. Therefore, to work with themes in Ext JS 4, you just need to install Ruby and Sencha Cmd in your machine.

At the time of writing the latest version of Sencha Cmd is 3.1. You can download the executable and install it. After installation, open the command prompt and type sencha as shown in Figure 8-3.

I’ll explain how to use the commands in Sencha Cmd to generate themes and compile them to CSS files later in this chapter.

You will learn more about Sencha Cmd in Chapter 10, when we discuss packaging and optimizing Ext JS 4 applications.

Basics of SASS

Before we start customizing the Ext JS 4 themes by modifying the SCSS files you need to understand some of the basics of SASS syntax like declaring variables, defining mixins and including mixins. The complete language reference can be found at http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html .

.mypanel1 {
  color: yellow;
  background-color: red;
  height: 3px;
  width: 3px; }
  
.mypanel2 {
  color: red;
  background-color: yellow;
  height: 5px;
  width: 2px; }

$color-yellow : yellow;
$color-red : red;
$width1 : 2px;
$width2 : 3px;
$height1 : 3px;
$heightt2 : 5px;
  
.mypanel1{
   color : $color-yellow;
   background-color:$color-red;
   height : $height1;
   width : $width2;
}
.mypanel2{
   color : $color-red;
   background-color:$color-yellow;
   height : $height2;
   width : $width1;
}

$color-yellow : #ffffcc;
$color-red : #ff0a0a;
@import "panel"

$color-yellow : yellow !default;
$color-red : red !default;

.mypanel1 {
  color: #ffffcc;
  background-color: #ff0a0a;
  height: 3px;
  width: 3px; }
  
.mypanel2 {
  color: #ff0a0a;
  background-color: #ffffcc;
  height: 5px;
  width: 2px; } 

@mixin nameOfTheMixin(comma separated arguments){
}

@include nameOfTheMixin(argument values);

$color-yellow : yellow;
$color-red : red;
$width1 : 2px;
$width2 : 3px;
$height1 : 3px;
$heightt2 : 5px;
  
@mixin panel($classname,$color,$bgcolor,$height,$width){
  .#{$classname}{
     color : $color;
     background-color:$bgcolor;
     height : $height;
     width : $width;
  }
}
  
@include panel('mypanel1',$color-yellow,$color-red,$height1,$width2);
@include panel('mypanel2',$color-red,$color-yellow,$height2,$width1);

@include panel($classname:'mypanel1',
           $color:$color-yellow,
           $bgcolor:$color-red,
           $height:$height1,
           $width:$width2);
  
@include panel($classname:'mypanel2',
               $color:$color-red,
               $bgcolor:$color-yellow,
               $height:$height2,
               $width:$width1);

Creating Custom Themes

As I said earlier, we are going to modify the SCSS files of the UI components and run them using Sencha Cmd, which will generate a CSS file. Modifying the SCSS files involves modifying the variables and including the mixins provided for the components. For instance if I have to modify the values for the SCSS variables for the Ext.button.Button class, you can create a Button.scss file in the button folder and provide values for the variables. You can get the variables list from the API documentation. Figure 8-4 shows the API documentation for the Button class, which has the CSS vars and mixins.

Figure 8-4 shows the list of CSS vars and mixins of the Button class. All these variables have some default values that you can modify in the Button.scss file.

We know that all the UI components inherit from the Ext.Component class. Component.scss provides a global list of variables and mixins. The values of these variables can be changed, which will result in the change in the appearance of all the UI components. Figure 8-5 shows the list of CSS vars and mixins in the Component class. They are available in the documentation as Global_CSS.

Let’s create an Ext JS 4 application called ThemingAndStyling that uses the default classic theme. We will create a page that uses a Panel with a Textfield and Button. We’ll create a custom theme and use it in this application. Figure 8-6 shows the project structure.

The ext-all.css file just imports the ext-theme-classic-all.css file like this.

@import '../ext-theme-classic/ext-theme-classic-all.css';

Listing 8-6 shows the code in index.htm file. In this file we have included the ext-all.js and ext-all.css files.

Listing 8-6.  index.htm

<!DOCTYPE html>
<html>
<head>
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="extjs/ext-all.js"></script>
<script>
  Ext.onReady(function () {
    Ext.create("Ext.panel.Panel", {
      title: "Theme panel",
      items: [
               { xtype:"textfield",fieldLabel:"First name" },
               { xtype : "button",text:"Submit"}
      ],
      renderTo: Ext.getBody()
    });
 });
</script>
</head>
<body>
</body>
</html>

The code snippet in Listing 8-6 provides the output shown in Figure 8-7.

Let’s create a custom theme and play with the options available. We’ll use the Sencha Cmd to generate a custom theme. Sencha Cmd provides commands for creating a workspace, project, themes, etc. You can create a workspace, then a project, and then generate a theme for the project. To keep things simple, we’ll focus on creating a custom theme and apply it to the ThemingAndStyling application that we have created.

Let’s generate a theme called my-theme1. Let’s open the command prompt and go to the Ext JS 4 directory and run the following command to generate the theme.

sencha generate theme my-theme1

Figure 8-8 shows the command run in the command prompt window.

In the Ext JS 4 directory, under the packages folder you will notice a folder called my-theme1 generated. The contents of the my-theme1 folder are shown in Figure 8-9.

As shown in Figure 8-9, what’s interesting and important is the sass folder. The sass folder contains various other folders where we’ll create the SCSS files.

• var folder will contain the definitions of the variables of the UI components
• src folder will contain the @include calls to the mixins and SASS rules.
• etc folder will contain additional SASS mixins and other utility functions.

The resources folder will contain the images that you want to use for the components.

The package.json file in my-theme1 folder serves as the manifest for the theme. It contains information like the name, version, base theme, etc. The contents of the package.json file are shown below.

{
    "name": "my-theme1",
    "type": "theme",
    "creator": "anonymous",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "local": true,
    "requires": [],
    "extend": "ext-theme-classic"
}

As you will notice, the ext-theme-classic serves as the base theme for our my-theme1 theme.

Let’s start defining our SCSS files. Say we want to change the font size and font family of all the components. Let’s create a Component.scss file my-theme1/sass/var folder. We’ll use the CSS variables $font-size and $font-family as shown in Listing 8-7.

Listing 8-7.  Component.scss File

$font-size:18px !default;
$font-family:Courier New !default;

Let’s build our theme now that’ll generate a modified CSS file using the SCSS file we’ve created. You can run the following command from the my-theme1 directory in the command prompt.

sencha package build

The build command will invoke the compass library and generate CSS files in the my-theme1/build/resources folder. Figure 8-10 shows the command prompt where we run the build command.

The CSS files and images are generated in the build/resources folder. The contents of my-theme1/build/resources are shown in Figure 8-11.

As shown in Figure 8-11, we need to add the my-theme1-all.css file and the images folder in our ThemingAndStyling application. Let’s modify the ThemingAndStyling application to include my-theme1 as shown in Figure 8-12.

We’ve created a my-theme1 folder in ThemingAndStyling/resources folder and included the my-theme1-all.css file and images folder. Let’s modify the ext-all.css to import the my-theme1-all.css file like this.

@import '../my-theme1/my-theme1-all.css';

Running index.htm will show you the output with modified font size and font family as shown in Figure 8-13.

Let’s modify the style of the textfield. You can find out the CSS vars from the documentation for the Ext.form.field.Text class. In the my-theme1/sass/var folder let’s create a form/field folder and Text.scss in inside it. We’ll modify some CSS variables of the Text class as shown in Listing 8-8.

Listing 8-8.  Text.scss

$form-field-border-style:groove !default;
$form-field-color:red !default;
$form-field-font-weight: italic !default;
$form-field-font-size: 12px !default;
$form-field-height: 16px !default;

We have modified the border style, color, textbox height, and the weight and size of the fonts. Build the my-theme1 package to produce a modified my-theme1-all.css file. You will get the output shown in Figure 8-14.

I’ve discussed modifying the Component class and Text class variables. Let’s include a mixin with custom values now. We’ll include the mixin for the Ext.panel.Panel class. The Panel class documentation shows that it has a CSS mixin extjs-panel-ui. Let’s include this mixin with default values. We’ll create a new panel ui style called ‘cool’. Let’s create a Panel.scss file in sass/src/panel folder. The contents of Panel.scss are shown in Listing 8-9.

Listing 8-9.  Panel.scss

@include extjs-panel-ui(
    $ui-label: 'cool',
    $ui-border-color: black,
    $ui-border-width: 3px,
    $ui-border-radius: 3px,
  
    $ui-header-font-family: Times New Roman,
    $ui-header-font-size: 16px,
    $ui-header-font-weight: bold,
    $ui-header-color: white,
    $ui-header-background-color: black,
  
    $ui-header-border-color: black,
    $ui-header-border-width: 3px,
    $ui-header-padding: 2px,
  
    $ui-body-border-width: 5px,
    $ui-body-border-color: black,
    $ui-body-background-color: yellow
);

As shown in Listing 8-9, we include the extjs-panel-ui mixin by passing various arguments. We create a ui label called cool, as mentioned earlier. We have modified the background color and color of the header and body of the panel.

After running the sencha build command again and updating the my-theme1-all.css in our application, let’s make a change to the panel instance in index.htm. We will add a ui attribute to the code in Listing 8-6 like this.

Ext.create("Ext.panel.Panel", {
   title: "Theme panel",
   ui : "cool",
   items: [ ... ]
  ...
});

Executing the index.htm will produce an output with a modified look and feel of the panel as shown in Figure 8-15.