翻译自: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. 对hadoop 执行mapreduce时发生异常Illegal partition for的解决过程

    来自:http://blog.csdn.net/hezuoxiang/article/details/6878026 写了个mapreduce的JAVA程序,自定义了个partition class ...

  2. ibatis 调用存储过程

      ibatis 调用存储过程 CreationTime--2018年8月15日19点38分 Author:Marydon 1.返回系统游标集合 第一步:返回值,将返回值封装到HashMap中 < ...

  3. java反射--获取成员变量信息

    获取成员变量信息 代码及说明: public static void printFieldMessage(Object obj) { //要获取类的信息,首先要获取类的类类型 Class c=obj. ...

  4. 偏最小二乘回归(PLSR)- 1 概览

    1. 概览 偏最小二乘算法,因其仅仅利用数据X和Y中部分信息(partial information)来建模,所以得此名字.其总体处理框架体现在下面两图中. 建议先看第2部分,对pls算法有初步了解后 ...

  5. Java入门到精通——调错篇之Eclipse No Java virtual machine was found after searching the following locations

    一.错误现象. 在一次启动Eclipse的时候弹出了以下的错误 二.错误原因 原因是没有找到javaw.exe文件的路径. 三.解决方式 在eclipse根文件夹下找到eclipse.ini增加以下一 ...

  6. 使用 Python 的 matplotlib 绘图库进行绘图

    matplotlib 是 Python 最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 1  使用 Ma ...

  7. 腾讯QQ的历史

    http://www.agenow.com/bbs/DispText.aspx?id=1385106 OICQ:   大家都习惯性的认为OICQ是马化腾先生自己动手研发的,可在腾讯内部的网友之间又传来 ...

  8. 用bcdedit.exe重建bcd

    使用下面方法之前需要bcdedit.exe和bootsect.exe两个文件,bootsect.exe文件在vista和windows 7的安装光盘的boot目录下,而bcdedit.exe文件可以在 ...

  9. Python translate()方法

    描述 Python translate() 方法根据 maketrans() 方法给出的字符映射转换表转换字符串中的字符. 语法 translate() 方法语法: Python3中: S.trans ...

  10. Linux下从视频提取音频的方法

    Linux下可以利用mencoder将视频里的音频提取出来.方法如下: 1.首先安装mencoder.对于Ubuntu来说,软件仓库里就有mencoder,可直接输入如下命令安装 sudo apt-g ...