Sencha Touch快速入门（译）

本是古典何须时尚 2022-01-11 22:41 237阅读 0赞

***翻译自：[http://www.sencha.com/learn/sencha-touch-quick-start/][http_www.sencha.com_learn_sencha-touch-quick-start]***

1、下载Sencha Touch SDK——[下载链接][Link 1]

2、安装Safari或Chrome——IE不适合测试Sencha touch application，Sencha只在WebKit-based的浏览器或设备上运行。

3、安装测试服务器——虽然Sencha可以在客户端直接运行，但服务器端的功能更加齐全。

IIS或XAMPP等软件均可使用

4、解压Sencha Touch SDK

解压或拷贝Sencha到C:\\xampp\\htdocs目录下，并重命名为touch

![h14.png][]

现在可以进行测试了： http://localhost/touch

![h15.png][]

5. 安装Android SDK（可选）

如果想创建直接的AVD（Android Virtual Device）,可以在本地机器上安装[Android SDK][]

6. 在真实设备上测试代码（可选）

*  确保你的计算机没有运行任何防火墙软件，阻塞远程客户（remote client）访问你的web server.
 *  运行DOS命令（cmd）ipconfig查询你的IP地址，用该IP地址代替localhost

![h16.png][]

这样你就能使用你的真实设备（手机）访问服务器了。

你可能会遇到如下安全问题：

![h17.png][]

解决方法：

打开C:\\xampp\\apache\\conf\\extra中的httpd-xampp.conf文件，在末尾找到

修改为

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

![h7.png][]

7. 开始开发Sencha程序

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

![h6.png][]

在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][Try it now 1].
 *  [Roookies][]: A simple, themable app that pulls images and data from the Dribbble service. [Try it now][Try it now 2], and [read the tutorial][read the tutorial 1].
 *  [Mondrian][]: demonstrating how a single application can work on both phone and tablet devices.[Try it now][Try it now 3], and [read the tutorial][read the tutorial 2].
 *  [World Data][]: using [Touch Charts][] to display world economic data. [Try it now][Try it now 4].
 *  [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][Read the tutorial 1].

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!'
                });
            }
        });
    
    整个项目结构如下图

![h8.png][]

在浏览器或emulator中运行

![h9.png][]

**帮助：**

*  **[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

[http_www.sencha.com_learn_sencha-touch-quick-start]: http://www.sencha.com/learn/sencha-touch-quick-start/
[Link 1]: http://www.sencha.com/products/touch/download/
[h14.png]: /images/20220110/839f754c54734949a446e67fcb94b192.png
[h15.png]: http://src.sencha.io/636/http://img3.sencha.com/files/learn/h15.png
[Android SDK]: http://developer.android.com/sdk/index.html
[h16.png]: /images/20220110/f9d2b9961f884271a3270ad1094131ef.png
[h17.png]: http://src.sencha.io/636/http://img3.sencha.com/files/learn/h17.png
[h7.png]: http://src.sencha.io/636/http://img3.sencha.com/files/learn/h7.png
[h6.png]: http://src.sencha.io/636/http://img3.sencha.com/files/learn/h6.png
[Teagrams]: https://github.com/senchalearn/teagrams
[Try it now]: http://senchalearn.github.com/teagrams
[read the tutorial]: http://www.sencha.com/learn/my-first-sencha-touch-experience/
[CityBars]: https://github.com/senchalearn/citybars
[Try it now 1]: http://senchalearn.github.com/citybars/
[Roookies]: https://github.com/senchalearn/roookies
[Try it now 2]: http://senchalearn.github.com/roookies/?style=demo
[read the tutorial 1]: http://coding.smashingmagazine.com/2011/07/19/create-an-html-and-css-mobile-web-app-using-sencha-touch/
[Mondrian]: https://github.com/senchalearn/mondrian
[Try it now 3]: http://senchalearn.github.com/mondrian/
[read the tutorial 2]: http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch
[World Data]: https://github.com/senchalearn/worlddata
[Touch Charts]: http://www.sencha.com/products/touch/charts
[Try it now 4]: http://senchalearn.github.com/worlddata/
[Offline apps]: https://github.com/senchalearn/offline
[Read the tutorial]: http://www.sencha.com/learn/sencha-touch-quick-start/www.sencha.com/learn/taking-sencha-touch-apps-offline/
[PhoneGap Contacts]: https://github.com/senchalearn/phonegapcontacts
[Read the tutorial 1]: http://www.sencha.com/learn/sencha-touch-quick-start/www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap
[h8.png]: /images/20220110/faae8ddc8c6141ab82ca0e60ed681455.png
[h9.png]: /images/20220110/51fc17f8f87b4d148542d0d6c6c82555.png
[Tutorials and FAQs]: http://sencha.com/learn/touch
[Online API Documentation]: http://dev.sencha.com/deploy/touch/docs
[Sencha Touch Forums]: http://www.sencha.com/forum/forumdisplay.php?56-Sencha-Touch-Forums