翻译自：http://www.sencha.com/learn/sencha-touch-quick-start/

1、下载Sencha Touch SDK——下载链接

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

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

IIS或XAMPP等软件均可使用

4、解压Sencha Touch SDK

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

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

5. 安装Android SDK（可选）

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

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

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

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

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

解决方法：

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

<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上也有附有完整说明文档的示例，如：

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中运行

帮助：

Sencha Touch快速入门（译）的更多相关文章

  1. 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  2. Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据

    今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success&qu ...

  3. 【翻译】使用Sencha Touch创建基于Tizen应用程序

    原文:Building a Tizen App With Sencha Touch 作者:Gautam Agrawal Gautam Agrawal is Sencha's Sr. Product M ...

  4. sencha touch 入门学习资料大全(2015-12-30)

    现在sencha touch已经更新到2.4.2版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...

  5. 【Win2D】【译】Win2D 快速入门

    原文链接:http://microsoft.github.io/Win2D/html/QuickStart.htm 快速入门 这是 Win2D 的快速入门教程,将会介绍 Win2D 中的基本功能.你将 ...

  6. sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩

    经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...

  7. sencha touch 入门学习资料大全

    现在sencha touch已经更新到2.3.1版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...

  8. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  9. sencha touch 入门系列 （二）sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

随机推荐

  1. 【转】web服务器工作原理

    一.静态网页的工作原理如下:A.用户在浏览器的地址栏输入要访问的地址并回车,触发这个浏览请求. B.浏览器将请求发送到Web服务器.C.Web服务器接受这个请求,并根据请求文件的后缀名判定是否为HTM ...

  2. VB 获取默认打印机的状态

    如何获取默认打印机的状态,包括缺纸.卡纸.无连接等状态,还有将某文件打印后,如何得知打印成功? Option ExplicitDeclare Function MapPhysToLin Lib &qu ...

  3. git gui :Updating the Git index failed. A rescan will be automatically started to res

    这个是由于unix系统的换行符和windows的换行符不一致造成的结果.你在安装git的时候,设置了成使用LF,即unix换行符,可是你是在windows下进行文件编辑的,所以会出现上面的警告.其实这 ...

  4. UIScrollView 循环滚动，代码超简单

    如今非常多应用里面多多少少都用到了循环滚动,要么是图片.要么是view,或者是其它,我总结一下,写了个demo分享给大家. 先看代码之后在讲原理: 1.创建一个空的项目(这个我就不多说了). 2.加入 ...

  5. 图片压缩兼修改md5

    概述 一个桌面程序,能修改图片的尺寸和质量,并且通过加水印的方式修改图片的md5等值. 详细 代码下载:http://www.demodashi.com/demo/13498.html 一.程序截图 ...

  6. 连接oracle时报错：ORA-28001: the password has expired

    调试Web项目的时候出现异常: java.sql.SQLException: ORA-28001: the password has expired 网上查了一下,是Oracle11g密码过期的原因 ...

  7. poi读取excel元素

    Java读取excel元素 忽略元数据末尾回到原数据开始处 pom文件设置 <dependency><groupId>org.apache.poi</groupId> ...

  8. Python 爬虫实例（4）—— 爬取网易新闻

    自己闲来无聊,就爬取了网易信息,重点是分析网页,使用抓包工具详细的分析网页的每个链接,数据存储在sqllite中,这里只是简单的解析了新闻页面的文字信息,并未对图片信息进行解析 仅供参考,不足之处请指 ...

  9. ecshop的数据库getRow、getAll、getOne区别

    ECShop没有使用一些开源的数据库操作类,比如adodb或者PEAR,而是封装了自己的实现.这样做的好处是实现非常轻量,大大减小了分发包的文件大小.另外,当网站需要做memcached缓存时,也可以 ...

  10. unity, 两个动画同时播

    法一,animationLayer. 处于不同animationLayer中的状态可以同时运行,即其中的动画可以同时播放. 所以通常一个角色至少需要用两个animationLayer,一个layer用 ...