Sencha Touch 2User Guide

Sencha Touch 2 User Guide Knowledge Points Summary

1. Quick Start with Sencha Touch 2

1.1 What is Sencha Touch?

Sencha Touch is a powerful HTML5 framework that allows developers to create high-performance, cross-platform mobile applications. With Sencha Touch, developers can build consistent and beautiful user interfaces for Android, iOS, and BlackBerry operating systems.

1.2 Preparation Before Development

• Download Sencha Touch SDK: Obtain the latest Sencha Touch 2 SDK and SDK tools like Sencha Cmd.
• Set Up Development Environment:
• Install a local web server (e.g., Apache or Nginx).
• Use modern browsers for development (recommended: Chrome or Safari).
• For Windows with IIS, ensure application/x-json MIME type is added.
• Install SDK Tools: Extract the SDK zip to the project directory and run the SDK Tools installer to add the sencha command line tool to the PATH environment variable.

1.3 Create Your First Application

Run the following command to generate a new app framework:

$ sencha generate app  

For example, to create an app named GS:

$ sencha generate app GS ../GS

This will generate a set of files, including .senchasdk, index.html, and app.js.

2. Sencha Touch 2 Application Structure

2.1 Application Overview

Sencha Touch 2 supports the MVC architecture with three core components: Model, View, and Controller.

- Model: Manages data.

- View: Displays data and interacts with users.

- Controller: Handles user input, updates data, and notifies views.

2.2 Controller

• Definition: Handles user interactions, such as button clicks.
• Implementation: Define controller classes that inherit from Ext.app.Controller and use the control property to bind event handlers.

2.3 View

• Definition: The user interface of the application, which displays data and accepts user input.
• Creation: Create a class inheriting from Ext.Component and instantiate with Ext.create().

2.4 Device Description Files

• Purpose: Describe the features of target devices for better application adaptation.
• Example: Define supported screen sizes and resolutions.

3. Advanced Features

3.1 Routing, Deep Linking, and Back Button

• Routing: Defines navigation between pages within the app.
• Deep Linking: Allows external links to open specific pages within the app.
• Back Button: Defines the behavior when the back button is pressed.

3.2 MVC Dependency Management

• Purpose: Manages dependencies between application components.
• Implementation: Dynamically load necessary resources through configuration or code.

3.3 Components and Layout

• Components: UI elements like buttons and lists.
• Layout: Organizes components in various ways, like card or grid layouts.

3.4 Event Handling

• Definition: Responds to user actions or other component events.
• Binding: Use the bind method to associate event handlers with components.

3.5 Themes and Styles

• Theme: Defines the overall appearance of the application.
• Style: Specifies properties such as color and size for elements.

4. Data Management

4.1 Data Model (Model)

• Definition: An object that stores data.
• Fields: The data attributes of the model.
• Validation: Ensures data validity.

4.2 Store

• Function: Manages and retrieves collections of data.
• Data Source: Where data is obtained (e.g., database, API).
• Sorting: Sorts data in a specific order.

4.3 Proxy

• Definition: Manages communication between the store and remote data sources.
• Types: Such as AJAX, RESTful API.
• Configuration: Defines parameters like request methods and URLs.

5. Native App Packaging

5.1 iOS App Packaging

• Preparation: Create an Apple Developer account and obtain certificates and profiles.
• Steps: Use Sencha Cmd or other tools to package the app into an .ipa file.

5.2 Android App Packaging

• Preparation: Register a Google Play Developer account.
• Steps: Use Sencha Cmd or other tools to package the app into an .apk file.

6. Native API Access

• Tools: Use the Ext.device module to access device features.
• Functions: Includes access to the camera, GPS, contacts, etc.

Sencha Touch 2 provides a complete solution covering everything from quick-start to complex app development, as well as multi-device adaptation and native app packaging, greatly enhancing development efficiency and user experience.