在MyEclipse和Tomcat下配置Sencha Touch环境

fei00 2013-10-02

首先要配置开发环境。这个很简单，只要到官方网站下载Sencha Touch压缩包即可http://www.sencha.com/products/touch/。

开发工具随便一个编辑器，记事本也可以的。

本人用的是MyEclipse+Tomcat，Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我为了以后例子可以跟后台交互)

其实可以直接浏览本地静态html文件的。

在MyEclipse和Tomcat下配置Sencha Touch环境

1，编写messageBox.html文件：

Html代码

<!doctype html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>messageBox.html</title>
<linkrel="stylesheet"href="../../ext/resources/css/sencha-touch.css"type="text/css">
<scripttype="text/javascript"src="../../ext/sencha-touch.js"></script>
<scripttype="text/javascript"src="messageBox.js"></script>
</head>
<body>
</body>
</html>

如果你以前用过Extjs，那么这段代码你很容易明白。

引入sencha-touch.css样式文件。
引入sencha-touch.js核心库文件。
messageBox.js是例子用的文件。

2，编写messageBox.js文件：

Js代码

Ext.setup({
icon: '../icon.png',
tabletStartupScreen: '../tablet_startup.png',
phoneStartupScreen: '../phone_startup.png',
glossOnIcon: false,
onReady: function() {
Ext.Msg.alert('提示', '第一个SenchaTouch程序！');
}
});

现在我们只关心onReady函数里面的代码，其他可以copy。

如果你以前做过Extjs那么看API难不到你。你可以在onReady中使用其他组件进行测试的。

3，运行效果：

本人使用的是Opera的手机模拟器(支持HTML5)，google浏览器也可以的。

在浏览器输入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html

当然你可以直接打开html进行浏览而不必要部署到服务器(我为了以后例子可以跟后台交互)

在MyEclipse和Tomcat下配置Sencha Touch环境

Sencha Touch 的详细介绍：请点这里
Sencha Touch 的下载地址：请点这里

相关阅读：

: fei00

相关推荐

（译）Sencha ExtJS白皮书之一：现代Web堆栈——前端技术分类以助选型

今天驱动企业计算发生改变的两个最大动力是多设备计算和云。多设备和云计算正在推动应用程序体系结构朝着更强大的前端和更灵活的后端发展。移动设备正成为业务数据和应用的重要网关。云端- 通常实现为提供丰富的API服务 - 正在迅速成为这波应用新浪潮的后端补充。在后

huanghuang 0喜欢 / 0评论 2014-11-08

移动跨平台的10大跨平台工具

HTML5应用开发的大热让众多跨平台开发框架逐渐风行，而Sencha Touch就是其中之一。Sencha Touch对于iOS平台的兼容性非常好，画面切换效果亦是相当流畅。Titanium最大的特点就是，由于是基于硬件的开发，开发过程中所创建的应用可选择

朱莉的乔夫 0喜欢 / 0评论 2015-03-13

ExtJS5 整合Spring4之一

ExtJS是优秀的前端RIA组件，ExtJS5采用了MVVM模型，它在MVC的基础上引入ViewModel抽象，实现了在View和Data之间的双向Bind，程序员不需要再关注界面field与数据的双向更新。在MVVM模型之下，可以轻松实现对数据的CRU

Remindhh 0喜欢 / 0评论 2016-01-03

ExtJS5 整合Spring4之一

原型组成及环境搭建ExtJS是优秀的前端RIA组件，ExtJS5采用了MVVM模型，它在MVC的基础上引入ViewModel抽象，实现了在View和Data之间的双向Bind，程序员不需要再关注界面field与数据的双向更新。在MVVM模型之下，可以轻松

Raindan 0喜欢 / 0评论 2016-01-03

Sencha Cmd与后端同域开发方法

解决这个问题的思路是把前端项目和后端项目都加入到Tomcat里，让访问前端的URL和后端保持一致，并通过eclipse启动tomcat以方便开发。

zmminer 0喜欢 / 0评论 2015-10-21

（译）Sencha ExtJS白皮书之一：现代Web堆栈——前端技术分类以助选型

概述今天驱动企业计算发生改变的两个最大动力是多设备计算和云。多设备和云计算正在推动应用程序体系结构朝着更强大的前端和更灵活的后端发展。移动设备正成为业务数据和应用的重要网关。云端- 通常实现为提供丰富的API服务 - 正在迅速成为这波应用新浪潮的后端补充。

huanghuang 0喜欢 / 0评论 2014-11-08

Sencha Touch 和 jQuery Mobile 该如何选择

如果你正在面临是选择 jQuery Mobile 或者是 Sencha Touch ，那么下面这些因素是你需要考虑的。jQuery MobileJM 只是一个 UI 库，依赖于 jQuery 和 jQuery UI 的 DOM 操作、Ajax 和其他库。提

lrlnh 0喜欢 / 0评论 2014-10-15

Raphaeljs 插件实现任意SVG节点加载

使用中的烦恼在使用raphael 的时候都被折磨过，raphael 基本都是编程式节点加载，通过代码设置svg 的节点属性。// Creates circle at x = 50, y = 40, with radius 10. // Sets the f

MegatronKings 0喜欢 / 0评论 2014-07-14

【转】常用的 HTML5 移动应用开发框架比较

对于Mobile Web来说，现在是快速成长时代。因为大部分上述功能都是新技术，以及这些领域的技术还在迅速地改变。jQuery Mobile的性能是不稳定的，特别是在响应TAP事件的动画延迟补偿的时候。在作者的测试程序中，使用Sencha与jQTouch/

markshuai 0喜欢 / 0评论 2013-09-09

sencha touch中JsonP跨域访问返回JSON字符串

Ext.Msg.alert('请求失败','AJAX请求发送失败！modelMap.put;返回值要加上传过来的callback回调函数,这样在客户端解析才不会抛出invalidlabel错误.

Dolphinsz 0喜欢 / 0评论 2013-08-14

HTML5当前流行的9大开发框架

与手工编码比起来，HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件，比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。如果你有一个根据固定流程进行的特定

hhhkhhh 0喜欢 / 0评论 2013-02-06

Sencha SDK Tools 1.1的安装（Mac OS）

安装其实十分简单，双击安装程序即可实现安装，底层貌似用到了Qt，但是我实在不知到那里有界面。但是，就这么简单的一个动作，居然第一次安装我都没有搞定它，首先，下载MacOS版本的SenchaSDKTools1.1，双击安装，切记！不要选择任何目录，就使用它默

clayluo 0喜欢 / 0评论 2011-06-08

Sencha Touch实战OA系统开发_Sencha Touch视频

第1讲.使用HTML5技术进行移动OA的开发_系统演示及相关技术简介。第4讲.使用HTML5技术进行移动OA的开发_学习SenchaTouch常用视图控件。第20讲.使用HTML5技术进行移动OA的开发_移动互联网下数据交互的关键技术JSON介绍

xueliangEmail 0喜欢 / 0评论 2016-01-26

phonegap + sencha touch 监控backbutton按钮返回事件切换页面

sencha cmd创建好sencha项目，安装好cordova环境。//confirm("再点击一次退出!}这样设置完后就可以监控到android设备的back按钮事件，防止点击back键后直接退出。界面间如何在sencha touch中使用b

爱技术爱生活TAO 0喜欢 / 0评论 2015-05-07

移动跨平台的10大跨平台工具

HTML5应用开发的大热让众多跨平台开发框架逐渐风行，而Sencha Touch就是其中之一。Sencha Touch对于iOS平台的兼容性非常好，画面切换效果亦是相当流畅。Titanium最大的特点就是，由于是基于硬件的开发，开发过程中所创建的应用可选择

lly00 0喜欢 / 0评论 2015-03-13

Sencha Touch页面跳转创建返回上一级按钮的设计思路

刚开始我都是手写的跳转，简单的跳转还行，如果页面跳转复杂的话简直生不如死，那么该如何解决这种情况呢？假设页面是直线跳转，不存在循环跳转，也就是A页面跳到B页面，B页面又跳到C页面，C页面又跳到D页面，并且在跳转页面时创建返回上一级按钮，如下图：

胡杨林 0喜欢 / 0评论 2014-11-24

使用sencha cmd创建android应用

sencha cmd 4环境安装下载android SDKhttp://developer.android.com/sdk/index.html下载rubyhttp://rubyinstaller.org/downloads/设置android SDK的环

yeaperyeo 0喜欢 / 0评论 2014-09-19

sencha touch 基础 alert

DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>index.html文件示例</title> <l

Theqianduan 0喜欢 / 0评论 2014-04-09

在sencha touch（worklight）中调用Android代码

在senchatouch开发中有些功能实现比较困难，或是某些功能必须使用Android原生代码。这时就需要用senchatouch代码调用Android代码了，可以通过phonegap实现。首先在Android项目src下添加包com.share,包中新建

HangMine 0喜欢 / 0评论 2014-01-23

sencha > Ajax

url: 'myUrl',//timeout: 5000,method: 'GET',//disableCaching: false,console.log("Spiffing, everything worked");},consol

ajaxhe 0喜欢 / 0评论 2013-10-22

sencha touch当list没有数据时显示提示语或图片等

在senchatouch项目做list时需要在没有数据的情况下显示图片和提示语句，最开始使用了笨办法，就是在controller动态改变view层内容。今天在看senchatouch文档时发现sencha原本就有解决这种情况的方法，只需在view加empt

dugujiujian 0喜欢 / 0评论 2013-10-14

jquerymobile与sencha touch两者比较

Sencha Touch基于web-kit浏览器并做了优化，而jQuery Mobile适用于一般浏览器。因为Sencha Touch做了优化，很多人觉得它比jQuery Mobile更棒。混合移动应用会让Sencha Touch熠熠生辉，它会让移动应用非

EdwardSiCong 0喜欢 / 0评论 2013-08-06

Phonegap+Android+Sencha touch开发应用(一)

本节将做一个登录和注册模块。具体代码见附件！！！！1，安装android开发环境。下载Phonegap解压后，里面有一个android例子。a，拷贝里面cordova-2.8.0.jar到项目libs目录下。}e，在项目文件夹assets中创建web文件，

益之 0喜欢 / 0评论 2013-06-08

phoneGap实际开发中的某些雷区

去年这个时候我很烦恼，因为我觉得我OUT了。起因是我买了一台Android系统的手机。当我用自己的google账号登录上去后，我发现通讯录被同步了，Gtalk实时通知了，Gmail随身能看了。还有成百数千的应用，让我足足玩了一周。电脑占据了用户每天8小时的

益之 0喜欢 / 0评论 2013-03-07

Sencha Touch与PhoneGap，响应android返回按钮

使用Sencha Touch开发Html5应用时，在iPhone上还好，因为没有物理返回按钮，所以可以使用NavigationView的Back Button来实现Pop页面，但是在Android手机上，用户习惯使用Android自带的物理Back But

益之 0喜欢 / 0评论 2012-11-11

Sencha touch、JQuery Mobile取舍

jQuery Mobile只是一个 UI 库，依赖于 jQuery 和 jQuery UI 的 DOM 操作、Ajax 和其他库。为了创建 UI 部件，你只需要编写 HTML 即可，JM 会为对这些 HTML 元素进行修饰。可方便地重用已有的 HTML 代

梦月如风 0喜欢 / 0评论 2012-06-18

sencha touch2学习笔记(四)---panel容器

在sencha touch2中，panel就是一个容器，可以容纳很多组件，可以控制布局。)docked:'top'表示工具栏位置在上。这只是个hello world式的例子。如果想了解复杂的应用，可以参看文档的介绍哦。

LBJZPP 0喜欢 / 0评论 2012-06-08

sencha touch2学习笔记(三)----form表单容器及其子组件

sencha touch2封装了很多的UI组件，今天标记下学过的组件---formPanel。所以创建的时候代码如下：。})items里可嵌套入很多组件，这里我嵌入了很基本的一些组件。

weitao00 0喜欢 / 0评论 2012-06-01

用 Sencha Touch 构建移动 web 应用程序

在软件开发领域中，有两个重要的趋势越来越重要：移动应用程序开发和基于标准的 HTML5 web 开发。任何类型开发的学习过程都是艰苦的。HTML5 开发近期日渐流行，因为它是基于标准的。虽然供应商正在迅速地融入并遵守这些早期的规范，但 HTML5 还不是很

scdn 0喜欢 / 0评论 2012-04-14

2012年，开发人员对HTML5都有哪些期待？

2012年开发人员对HTML5都有哪些新的期望？HTML5是一个发展中的标准，在2011年里，HTML5的发展取得了许多突破性的进展，但是它还有许多方面需要进一步的提升。HTML5开发的两大主要参与者Sencha和appMobi都参与了2012年HTML5

Jym 0喜欢 / 0评论 2012-01-13

Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, T

It’s been an exciting year for the mobile Web. Adoption of HTML5 and CSS3, improved performance in mobile browsers, and an explo

jadechen00 0喜欢 / 0评论 2011-09-22

移动Web UI框架jQuery Mobile或Sencha Touch

1、jQueryMobile建立在jQuery 和 jQuery UI框架之上，很好的继承了jQuery支持多浏览器的特性，官方介绍支持iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows

阿尔卑斯山 0喜欢 / 0评论 2011-09-04

移动Web UI框架jQuery Mobile 或 Sencha Touch的选择

最近常被问到是用 jQueryMobile 还是 Sencha Touch ，本人也比较关注这两个框架，试图从以下两方面发表点儿见解：。移动Web UI框架较多，这里仅讨论比较典型的两个框架，如有更好方案或有建议，请移步移动Web开发社区发表评论。

AB君 0喜欢 / 0评论 2011-09-04

使用Sencha Touch框架开发Twitter搜索应用

　目前，Android和iphone两大主流手机的应用开发吸引了大批开发人员的眼光。而开发人员最期望的是能尽可能运用旧有的技术知识，去设计这些新的应用，因此出现了不少专为方便开发者设计的各类框架，比如有jQueryMobile和SenchaTouch,Ph

86510896 0喜欢 / 0评论 2011-05-23

UIWebView如何触发其中的Web页面的Orientation事件？

最近在用sencha touch在iOS上试着开发一些native-like应用，遇到不少问题，其中之一就是通过UIWebView加载web页面时，如果转动屏幕，里面的Web页面不会自动适配高宽，但是用Safari浏览时却是可以的。用Safari的Web检

JamieCheung 0喜欢 / 0评论 2010-09-15

HTML5的你应该记住的一些知识点

刚开始学HTML5是从w3school开始的，那只是非常简单的一些了解，后面开始看一些兄弟连的HTML5+CSS3的视频，照着视频做了一些简单的demo，后面总感觉还是少了点什么，就开始买书看看的是唐俊开的《HTML5移动Web开发指南》，以下是一些简

红壶吃猬队 0喜欢 / 0评论 2015-06-09

Sencha Touch的性能优化

Sencha Touch 跟Ext js一个提供了丰富且高级的组件让我们能快速的开发出一个跨手机平台而且很绚丽的产品,这听起来不错,但很快我们发现了一个严重的问题,手机上的效果根本没有在PC上用chrome打开的效果一样让人有刷刷的快感，甚至让人痛苦。从上

飞鸟天堂 0喜欢 / 0评论 2013-10-02

PhoneGap应用开发的那些坑爹事儿

去年这个时候我很烦恼，因为我觉得我OUT了。起因是我买了一台Android系统的手机。当我用自己的google账号登录上去后，我发现通讯录被同步了，Gtalk实时通知了，Gmail随身能看了。还有成百数千的应用，让我足足玩了一周。电脑占据了用户每天8小时的

kehongyong 0喜欢 / 0评论 2011-12-15

16个最流行的JavaScript框架[推荐]

5.Uize Javascript FrameworkUIZE 是一个强大、开源、面向对象的JavaScript框架，拥有众多效果炫目的Web部件。

AndrewFrank0zxy 0喜欢 / 0评论 2011-05-29

HTML 5应用开发工具Sencha.io融资1500万美元

北京时间10月25日消息，据国外媒体报道，刚刚推出新的HTML 5云服务套件Sencha.io的Sencha公司将在明天上午宣布他们在第二轮融资中筹集到了1500万美元。Sencha公司为HTML5开发人员提供JavaScript框架和工具。换句话说，他们

我心向佛善哉善哉 0喜欢 / 0评论 2011-10-25

8月8款非常实用的CSS工具推荐

从学习新的CSS3属性，到使您的CSS代码更高效，这里必然有你需要的一款CSS工具。CSS3 Patterns Gallery，让您通过缩略图或全屏模式浏览各种CSS3样式，搜集各种各样的CSS样式以便于你可以借用到你的网站上。PrefixMyCSS 帮助

MoeRookie 0喜欢 / 0评论 2011-08-01

Web移动应用 HTML5 CSS和JavaScript

移动设备的广泛使用，使许多传统开发者很无奈。一个企业真的既需要一个Web站点又需要一个移动应用程序吗?本文讨论了HTML 5的可移植性以及为什么在所有的移动平台上都可以良好运行的HTML5，CSS和JavaScript应用程序才是未来的趋势。许多开发者已经

erix 0喜欢 / 0评论 2011-05-25

2011年HTML 5愿景 Michael Mullany专访

近日，来自Sencha的Michael Mullany发布了一个列表，列举出了2011年会从HTML 5中获益的诸多内容，Michael深入地谈其愿景。Michael：目前，最重要的事情就是实现跨浏览器的特性。Michael：问题在于浏览器不断升级携带的W

hahahaha 0喜欢 / 0评论 2011-01-28

20岁印度工程师谈HTML5、CSS3开发Android和iOS应用

现在人人都想成为Android/iOS应用开发工程师。所以，今天大家将会认识到一些利用前端语言来开发Android/iOS应用的工具。在文章的末尾，也介绍了使用Java、C#、Lua以及AS3来开发Android应用的工具。希望大家都能找到适合自己的开发工

huningjun 0喜欢 / 0评论 2012-02-09

Web移动应用的未来：使用HTML5和CSS

许多开发者已经得出了结论：他们需要把注意力集中在特定的移动平台上——例如iPhone，Windows7或Android。而其他人开始意识到有许多开发工具可以让他们利用现有的技能——不管是HTML，CSS和JavaScript，还是像C或C++那样的现行的编

tivon仔 0喜欢 / 0评论 2010-07-28

Sencha推出HTML5动画制作软件实现效果

HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了Web网页的表现性能。

HansonJun 0喜欢 / 0评论 2011-07-19

ExtJs6.5.2新手入门——如何用sencha cmd创建自己的第一个项目

博主自己也是一个刚开始学习ext的小白，学习新知识一定要记录下来，直接复制自己原来写的培训手册里的，希望能帮到刚接触ExtJs的你！sdk安装时路径在生成项目时会用到，其他的默认一路安装即可，安装完成后运行sencha.exe，然后在sencha cmd

无极领域 0喜欢 / 0评论 2018-01-26

Sencha, the nightmare!

基础创建一个应用程序sencha -sdk /path/to/sdk generate app %name% /path/to/app. 放心，出错了会出红字，自己退回命令行。在 watch 模式下，任何对源程序的修改都会自动更新，方便马上看到效果。看起

编程爱好者联盟 0喜欢 / 0评论 2016-10-27

混合开发的框架的初步见解

如果你总听别人说HTML5的移动应用太慢，我只能告诉你应该有一些主见，首先HTML5会越来越好，移动端的硬件也会越来越强，怎么说呢，你仔细看一看你手机上的应用吧，很多应用已经悄悄的使用混合式开发了，如果像你说的它们很慢，你发现它们了吗？

编程爱好者联盟 0喜欢 / 0评论 2016-10-03