您所在的位置： &
1.2.3　第一个Sencha Touch 2.0示例页面
1.2.3　第一个Sencha Touch 2.0示例页面
机械工业出版社
《Sencha Touch权威指南》第1章Sencha Touch 2.0概述，本章讲述Sencha Touch 框架的基本概念及使用Sencha Touch能够开发什么样的Web应用程序。同时介绍如何下载与安装Sencha Touch 2.0框架的运行环境，以及如何利用Sencha Touch 2.0框架来开发与编译一个供移动设备专用的Web应用程序。本节为大家介绍第一个Sencha Touch 2.0示例页面。
1.2.3　第一个Sencha Touch 2.0示例页面
在使用Sencha Touch 2.0框架的时候，需要使用如下文件。
index.html：一个简单的HTML文件，在其中引用Sencha Touch框架与你的应用程序文件 (文件名可以使用其他名称，例如default.html，不强制为index.html)。
app.js：应用程序的核心脚本文件。
Sencha Touch开发包。
下面看一个最简单的index.html文件的示例。在Sencha Touch 2.0压缩包经过解压后的磁盘目录中新建一个MyApp目录，作为应用程序的根目录。在MyApp目录中新建一个index.html文件与一个app.js脚本文件（在1.3节中将解释为什么此处需要将应用程序的根目录建立在压缩包经过解压后的磁盘目录中），如代码清单1-1所示。
代码清单1-1　index.html文件示例&!DOCTYPE&html&&&　index.html文件示例&　&rel="stylesheet"&href="../resources/css/sencha-touch.css"&　type="text/css"&　&type="text/javascript"&src="../sencha-touch-debug.js"&　&　&type="text/javascript"&src="app.js"&&&&
在这个index.html文件中，sencha-touch.css文件为一个样式表文件，用来控制Sencha Touch框架中所有组件的外观样式。必须引用这个文件，且不建议对它进行修改。如果想自定义Sencha Touch框架中某个组件外观，可以在该文件之后引用另一个自定义的样式表文件，在该样式表文件中重新定义组件的样式。sencha-touch-debug.js脚本文件为Sencha Touch 2.0框架的供开发阶段时用的核心脚本文件。一旦这两个文件被引用，就可以在应用程序中使用Sencha Touch 2.0框架了。
注意　index.html文件中的body元素中没有任何内容，我们将使用Sencha Touch填入其中的内容。
现在看app.js文件中的内容。该文件中只调用一个alert函数，以确保应用程序能够正常运行，如代码清单1-2所示。
代码清单1-2　app.js文件示例Ext.application({ &　name:&'MyApp', &&　launch:&function()&{ &　&&&&alert('Sencha&Touch&2框架已被加载'); &　} &});&
使用Sencha Touch 2.0框架进行开发时，app.js是每一个应用程序中必须使用的核心脚本文件。在该脚本文件中进行应用程序的创建、定义应用程序名称、定义应用程序的启动界面等许多处理。
这里暂不介绍app.js脚本文件中的内容，只需要知道该程序简单调用JavaScript中的alert方法弹出一个消息即可，我们将通过这个消息是否被弹出来确认Sencha Touch 2.0框架是否被正确加载。使用本机中的Chrome浏览器（除此处外，本书后文中所提到的浏览器均为移动设备中的浏览器）打开示例页面，将看见页面中弹出一个消息，内容为“Sencha Touch 2.0框架已被加载”，如图1-13所示。
（点击查看大图）图1-13　第一个示例页面
该消息的正确弹出，表示已经在页面中正确引用了Sencha Touch 2.0框架所使用的脚本文件sencha-touch-debug.js。如果该文件没有被正确引用（通常是由拼写错误或文件路径书写错误所导致的），浏览器中将不显示任何内容，如图1-14所示。
使用Sencha Touch 2.0框架的时候，另一个常见问题是，Sencha Touch 2.0框架所使用的CSS文件没有被正确引用（通常是由拼写错误或文件路径书写错误所导致的），导致Sencha Touch 2.0框架中的组件不能正确显示。
图1-14　Sencha Touch 2.0框架没有被正确引用另外，由于Sencha Touch 2.0框架采用动态加载组件的技术，所以如果任何组件没有被成功地动态加载到应用程序中，也将导致Sencha Touch 2.0框架中的组件不能被正确显示，甚至导致应用程序不能成功启动，相关内容将在第2章进行介绍。【责任编辑： TEL：（010）】&&&&&&
关于&&的更多文章
Sencha Touch是第一个基于Html 5专门为移动设备开发应用的JavaSc
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
多年来，Imar Spaanjaars一直是ASP.NET相关图书的畅销
《C#高级编程(第8版)》是C# 2012和.NET 4.5高级技术的
《Android 4 游戏入门经典(第3版)》将赋予您惊人的灵
本书对前沿而又成熟的系统分析技术和方法进行了讨论，包括CMM与过程改进、J2EE与NET平台、中间件及相关技术、应用服务器、Web
51CTO旗下网站sencha touch 入门 基础教程 介绍及用法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
31页免费4页1下载券10页1下载券16页1下载券7页1下载券 7页1下载券22页4下载券10页1下载券10页1下载券2页免费
喜欢此文档的还喜欢31页免费246页免费10页免费7页免费14页免费
sencha touch 入门 基础教程 介绍及用法|工​作​需​要​写​了​一​个​p​p​t​,​主​要​是​自​己​的​对​s​e​n​c​h​a​ ​t​o​u​c​h​的​一​些​认​识
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：3.54MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢16:30 by 威老, ... 阅读,
　　今天来扯一扯官方文档以及其他的一些东西。大部分问题，其实都是可以通过查阅文档来解决的。
　　因为文档是没办法直接用浏览器打开来看的，所以请大家先将sencha-touch-1.1.0下的docs文件夹部署到本机的IIS或者其他服务器上，以便查阅。
怎么部署文档?
　　Win7的话，比较简单，请看这篇文章
　　xp的话
　　安装好IIS之后，把docs文件夹拷贝至C:\inetpub。新建一个站点，物理路径C:\inetpub\docs。指定一个端口。
　　完成之后，在地址栏输入地址:端口号，就能够正常访问文档了。
Config Options
　　　　配置项，当对象初始化的时候，会使用配置项的值来进行配置。这有点像是构造函数的参数。比如说text有这么一个配置项：
　　　　placeHolder&: String
　　　　A string value displayed in the input (if supported) when the control is empty.
　　　　这个配置项是用来配置输入框默认的显示内容的。类型为String
　　　　所以我们可以这么写：
xtype: 'textfield',
placeHolder: '默认的内容'}
Public Properties
　　　　公共属性，这个没什么好说的。跟其他面向对象语言的公共成员是一样的。
Public Methods
　　　　公共方法，这个也没什么好说的。但还是举个例子吧，这个是store的queryBy方法
　　　　queryBy( Function fn, [Object scope] ) : MixedCollection
　　　　方法名：queryBy
　　　　第一个参数：以方法为参数
　　　　第二个参数：作用域("[]"括起来的代表可选参数)
　　　　返回值类型：MixedCollection
Public Events
　　　　公共事件，表明这个对象所拥有的事件，我们可以通过listeners配置项来对事件进行监听。
　　　　示例：
xtype: 'panel',
listeners : {
cardswitch : function(){
alert('Card切换');
　　　　也可以调用on()方法来给事件添加监听。
　　　　on( String eventName, Function handler, [Object scope], [Object options] ) : void
　　　　第一个参数：事件名
　　　　第二个参数：时间的处理函数
　　　　第三个参数：作用域
　　　　第四个参数：配置项
　　　　示例：
myPanel.on('cardswitch' , function(){
alert('Card切换');});
提高查找效率
　　　　首先是这个搜索框，大家都会用的。
　　　　然后还有一个:ctrl+F。两个一起用能够有效提高搜索效率。
实用的工具条
直接用图片讲解比较清楚些：
&OK以上就是今天的内容，各位再见！有什么问题欢迎大家一起探讨！Sencha Touch - 博客 - 伯乐在线直接上代码。onReady: function(){&&&&&&& //定义数据结构&&&&&& &Ext.define('Contact', {&&&&&&&&&&& extend: 'Ext.data.Model',&&&&&&&&&&& fields: ['firstName', 'lastName']&&&&&&& });&&&&&&&&& //定义数据内容& & & var store = Ext.create('Ext.data.Store', {&&&&&&&&&&& model: 'Contact',&&&&&&&&&&& sorters: 'lastName',&&&&&&&&&&& getGroupString: function(record) {&&&&&&&&&&&&&&& return record.get('firstName')[0];&&&&&&&&&&& },&&&&&&&&&&& data: [&&&&&&&&&&&&&&&&& { firstName: 'Tommy', lastName: 'Maintz' },&&&&&&&&&&&&&&&&& { firstName: 'WdTommy1', lastName: '2' },&&&&&&&&&&&&&&&&& ]&&&&&&& });&&&&&&&& //定义List&&&&&&&& var list = Ext.create('Ext.List', {&&&&&&&&&&& fullscreen: true,&&&&&&&&&&& itemTpl: '&div &{firstName} &strong&{lastName}&/strong&&/div&',&&&&&&&&&&& store: store,&&&&&&&&&&& onItemDisclosure: function(record) {&&&&&&&&&&&&&& alert(record.data.firstName);&&&&&&&&&&& },&&&&&&& });&&&&&&& //注册滚动的监听事件& 用于分页&&&&&&& list.getScrollable().getScroller().on('scrollend', function(scroller, offset) {&&&&&&&&&&&&&&&&&& console.log(offset.y);& &&&&&&&&&&&&&&&&&& console.log(scroller.maxPosition.y); &&&&&&&&&&&&&&&&&& if(offset.y &= scroller.maxPosition.y) //到底部&&&&&&&&&&&&&&&&&& {&&&&&&&&&&&&&&&&&&&&&&& //加载下一页数据&&&&&&&&&&&&&&&&&&&&&&& list.getStore().loadData([&&&&&&&&&&&&&&&&&&&&&&& { firstName: 'fwt', lastName: '' }&&&&&&&&&&&&&&&&&&&&&&& ],true);&&&&&&&&&&&&&&&&&& }&&&&& &&&&&&&& });}&注意以下几点，与2.0以下版本不同。list.getStore() //活动List的数据内容list.getScrollable().getScroller() //获取List的滚动条对象offset.y&&&&&& //当前滚动条的y坐标值scroller.maxPosition.y&& //窗体滚动条的最大Y坐标值