Sencha Touch API Usage Guide

This article explains how to use the Sencha Touch API and how to view the official sample source code in the API

Pre-preparation

1.sdk

:http://www.sencha.com/products/touch/download/

Fill in the corresponding information and email address point download, you will receive a download message in the mailbox, as shown:

Freely extract to any directory,:

2.api

:http://docs.sencha.com/

Click Sencha Guides, the download screen will pop up, select Touch to download, as shown in:

Freely extract to any directory,:

Here is a simple way to run the API (need to install Google Chrome)

Find the Google Chrome installation directory:

My installation path is C:\Users\ repair superciliousness \appdata\local\google\chrome\application

Right-click chrome.exe Create a shortcut, right-click Shortcut, Popup properties

Add the following command to the target:--disable-web-security ,

Close all open Google browsers and open Google Chrome again via Shortcuts

The following interface appears to indicate success,

Drag the index.html in the D:\ASPX\touch-docs-2.3.1 into the browser ,

If not, you can enter file:///D:/ASPX/touch-docs-2.3.1/index.html directly in the address bar , without having to build the IIS environment

Using the API

As shown, the first thing we see is a welcome interface. In the upper right corner is a search box where we can search by keyword, such as List

Select the first item

Through the menu bar on the left we can see the document interface that we enter into the list, in addition to the search bar, we can also directly navigate through the menu on the left to enter the interface

Move the mouse to the Body header section and click to see the following screen

. js file is the JS source code, SCSS is the corresponding scss source, click to enter

Below the title is the document navigation, which is divided into configuration navigation, sample navigation, method navigation, event navigation, CSS navigation, etc., and the right show button can be configured to show which methods/properties are hidden.

The top right of the body is the level description, the table name of the inheritance level of this class, already some application of the Mixins property, etc.

Here the list is a view control, so the body first has a demo example

Click the code Editor button to view the simple use of the source code, there are many use cases here

The following is a description of the use of properties/methods/Events

Some properties/methods/events will have a simple use case

Take Ext.data.Field As an example, the Convert property

Take list as an example, the On method also has a use example

Click on the top left navigation, the third module

Here are some introductory materials that are recommended for every beginner to read carefully

Click on the top left navigation, fourth module

Here is the official demo example, a more complete demo

How do I see the source of these demo samples? I didn't find it in the API file ..., but we can find it in the SDK.

Open the directory where the SDK is located,

Open the examples directory,

Here is the source code of the API Demo sample ...