[translation] Sencha Touch 2 starter: create a practical application of the two

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The original address:

Author: Lee Boonstra
Lee is a technical trainer at Sencha. She's located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

In the three part of the Sencha Touch tutorial, you will create a simple question: do I need a utility application with umbrella, it will load from the worldweatheronline.com Web service weather information. Based on the code, the application can predict the need not to need to take an umbrella.

In the second part of the tutorial, we will start creating the subject application. This requires the use of the first part of the tutorial code, you can download it here.

The following is some additional resources:
The final application code -- a complete solution and a style sheet.
Some tutorials ideas.
To view the application effect of custom theme, click here.

This tutorial has the following requirements:

Expand the default theme

This election Oh with the default theme to produce a custom theme. From the default theme expansion is a good idea, because it contains a lot of Sencha Sass variables and mixed (mixins), which can be found in the API document.

By default, when you create the application in the use of Sencha Cmd, have created a Resources folder (resources). In the folder, including the Sass style sheet app.scss empty. Now please open app.scss.

//(1) Define your Sencha variables here

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

//(2) Define your custom Sass/CSS code and mixins here

At the top (1) position, is used to define your own (Sencha) variables, in this position can be directly to define their own mix. It's important to keep this order, otherwise the variables will have no effect. Import file to use these variables.

In the import (2), you can write their own and mixed style rules.

The following code can change color easily:

$base-color: #42282E;

By modifying the basic color, the color scheme you can use the most Sencha Touch components.

The following to the test. The use of Sencha Cmd, run the following command in the command line:

sencha app watch

The Sencha app watch command is available only in Sencha version Cmd4 or higher. You can contrast the difference between it and the Compass command compass watch. Each time you click save, Sencha Cmd will see the application, when changes are detected, the work will only perform a minimum, in order to re generate the Sass for the application and its CSS is the latest.

Open the http://localhost/dinmu in modern browsers can preview the application.

Now you can enjoy the experience. Sencha Touch contains a number of very good Sass variables and mixed, these variables can be used to define your own theme and mixed with ease. Adobe Kuler is a great tool to obtain the correct color combinations. Can go to the following address to find some color scheme:. The following will use these color scheme as if I need application umbrella color variable.

Below is the button, the alarm window and screen background color:

$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#D9CFB0,15%);
$form-bg-color: $page-bg-color;

In addition, need to remove all the gradient effect:

$base-gradient: 'none';

The bottom toolbar for UI light. To create a mixed to change the bottom toolbar light skin style. This requires the use of sencha-toolbar-ui, the insertion point (2) implementation in:

@include sencha-toolbar-ui('light', #DC9B74, 'none');

Create a custom CSS

The following rules to implement custom CSS

First, to modify toolbar Title Style:

.title {
    .x-title {
        line-height: 2.5em;
        text-shadow: none;
        letter-spacing: -1px;

Then, is the footer text position:

.footer {
    font-size: 0.6em;
    padding: 12px;
    text-align: right;
    letter-spacing: 0;
    a {
        color :#000;

In addition, but also for the custom templates to define the style. Following the first to change the font and font color:

.textview {
    color: black;
    line-height: 1.2em;
    letter-spacing: -1px;
    padding: 0.8em;
    text-transform: uppercase;

    .yes {
        color: $alert-color;
    .no {
        color: $confirm-color;
    .temp {
        color: $confirm-color;

The next is to set the form to edit. In an Sass style sheet, create the following style to adjust the set form style:

.x-form-fieldset {
    .x-form-fieldset-inner {
        border: none;
        background: $page-bg-color;
    .x-form-fieldset-instructions .x-innerhtml {
        color: #000;

.x-form-label {
    background-color: lighten(#DC9B74, 32%);
.x-toggle-field .x-form-label {
    background: none;
    border: none;
    margin-bottom: 20px;
.x-toggle {
    position: absolute;
    right: 0;

Implementing a custom font

In the Sencha import code, add fonts into code. This will use the Google font service. With this font service, from the large number of managed font family in browse and select the font:

@import url( );
@import url( );

Now to set the font.

For a toolbar title, days following rules to CSS class x-title:

font: {
    family: "Lobster";
    size: 1.2em;

For the template view, add the following rules to CSS class.Textview:

font: {
    family: "Oswald";
    size: 2em;

Adjustment performance

If want to optimize the Sencha performance of Touch application program, optimize the style sheet is probably the easiest thing to do, but very effective. To reduce the compile the style sheet file size.

Create application when using Sencha Cmd, will be automatically to style sheet compiler for the compressed file. This is because the output_style settings in the resources/sass/config.rb file is like this. If you want the readable style, you can set the output_style value for the expanded, but must pay attention, this time, the file will be relatively large.

Open the resources/sass/config.rb file, see the following statement:

output_style = :compressed

As an alternative to mix into all Sencha Touch framework, you can import only those absolutely necessary. This will reduce the size of the style sheet, so as to achieve faster download.

I usually to annotate all import into @import. Then, list all the required Sencha Touch mixed with Sencha, and to ensure that the Cmd can check and compile my Sass file.

Then, I started a line according to the need not annotate class. This is very difficult, because the class can not be used directly, but from other types of their subclasses, such as +Class+ or +Panel+ will be used to. And that's what I need a line to remove the cause, in order to check whether the terminal to compile errors. All available Sencha Touch into the list can be found in the touch/resources/themes/[theme-to-extend-from]/all.scss file.
Instead of using the following introduction"@import 'sencha-touch/default/all';":

@import 'sencha-touch/default/src/_Class.scss';
@import 'sencha-touch/default/src/_Button.scss';
@import 'sencha-touch/default/src/_Panel.scss';
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
@import 'sencha-touch/default/src/carousel/_Carousel.scss';
@import 'sencha-touch/default/src/form/_Panel.scss';
@import 'sencha-touch/default/src/form/_FieldSet.scss';
@import 'sencha-touch/default/src/field/_Field';
@import 'sencha-touch/default/src/field/_Checkbox.scss';
@import 'sencha-touch/default/src/field/_Select.scss';
@import 'sencha-touch/default/src/field/_Slider.scss';
@import 'sencha-touch/default/src/field/_Spinner.scss';
@import 'sencha-touch/default/src/picker/_Picker.scss';
@import 'sencha-touch/default/src/slider/_Slider.scss';
@import 'sencha-touch/default/src/slider/_Toggle.scss';

Since there is no need to use too many icons, the index does not need to implement the Pictos icon font. In this case, can be their own icon font, so you can save some extra bytes.

In the Sass style sheet into the top import Sencha before adding the following variables:

$include-pictos-font: false;
$include-default-icons: false;

Now, need to include a custom icon font. I through the web site (IcoMoon) to create icon font. It is in the goodies-tutorial folder. Copy the font folder dinmu to resources/sass/stylesheets/fonts/.

The following statement in the Google font into dinmyu Icon Font:

@font-face {
    font-family: 'Dinmu';
    src:url('stylesheets/fonts/dinmu/Dinmu.eot?#iefix') format('embedded-opentype'),
        url('stylesheets/fonts/dinmu/Dinmu.ttf') format('truetype'),
        url('stylesheets/fonts/dinmu/Dinmu.woff') format('woff'),
        url('stylesheets/fonts/dinmu/Dinmu.svg#Dinmu') format('svg');
    font-weight: normal;
    font-style: normal;

In the following all imported, to create an icon to display the settings button with:

@include icon('settings', 's', 'Dinmu');

After this, you can write code to add some interesting icon template view:

.norain:before {
    font-family: 'Dinmu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    padding-right: 10px;
    font-size: 60px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

.norain:before {
    content: "\53";
    color: $confirm-color;
.rain:before {
    content: "\52";
    color: $alert-color;

So, you need to take an umbrella theme has been completed! Open a browser and run http://localhost/dinmu.

In order to improve the application, the next step will be to bed a production and the application is published as a native PhoneGap application. The topic in the third part tutorial about.

Create a Sencha theme interesting? From the beginning of December, Sencha will begin to provide advanced Ext JS theme course. It can refer to all over the world the development course or participate in online training.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Alexandra at December 03, 2013 - 10:28 PM