Sencha Touch Quick Start (translation)

Translated from: http://www.sencha.com/learn/sencha-touch-quick-start/

1. Download Sencha Touch SDK-- download link

2, installation or Safari Chrome - IE not suitable for testing Sencha touch application, Sencha runs only on WebKit-based browser or device.

3, install the test server - although Sencha can be run directly on the client, but the server side features more complete.

Such as IIS or XAMPP software can be used

4, extract Sencha Touch SDK

Sencha extract or copied to C: \ xampp \ htdocs the directory, rename it to touch

Can now be tested: HTTP: // localhost / Touch

5. Install Android SDK (optional)

If you want to create a direct AVD (Android Virtual Device), can be installed on the local machine Android SDK

6. In a real device test code (optional)

Make sure your computer is not running any firewall software blocking remote client (remote client) access to your web server.
Run DOS command (cmd) ipconfig query your IP address, the IP address instead of using localhost

So you can use your real device (mobile phone) to access the server.

You may encounter the following security issues:

Solution:

Open C: \ xampp \ apache \ conf \ extra in httpd-xampp.conf file, found at the end

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from 127.0.0.0/8
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

修改为

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from all
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

停止并重启Apache，这时候就可以看到

7. 开始开发Sencha程序

你可以在 /touch/examples找到官方示例代码，

在GitHub上也有附有完整说明文档的示例，如：

Teagrams: Joe McCann's 'first app', demonstrating how to pull simple data from Instagram in a tablet app. Try it now, and read the tutorial.
CityBars: using Yelp data for cities' business listings. Try it now.
Roookies: A simple, themable app that pulls images and data from the Dribbble service. Try it now, and read the tutorial.
Mondrian: demonstrating how a single application can work on both phone and tablet devices.Try it now, and read the tutorial.
World Data: using Touch Charts to display world economic data. Try it now.
Offline apps: An app that demonstrates how to take resource and third-party data offline for the when the device is disconnected. Read the tutorial.
PhoneGap Contacts: using device APIs to get access to device contact information. Read the tutorial.

8. 第一个Sencha Touch程序

在你的服务器文件夹中创建新文件夹myapp和子目录lib，拷贝SDK文件（即touch文件夹）到lib中

创建index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
        <script src="app/app.js" type="text/javascript"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

创建app文件夹，在该文件夹中创建app.js文件

new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            dockedItems: [{xtype:'toolbar', title:'My First App'}],
            layout: 'fit',
            styleHtmlContent: true,
            html: '<h2>Hello World!</h2>I did it!'
        });
    }
});

整个项目结构如下图

在浏览器或emulator中运行

帮助：

Tutorials and FAQs in the sencha.com Learn Section.
Online API Documentation, also available in the /docs URL of your local SDK.（你本地的SDK帮助文档）
Sencha Touch Forums - populated by our huge & helpful community.

转载于:https://www.cnblogs.com/JoannaQ/p/3160046.html

Sencha Touch Quick Start (translation)

Guess you like