《SenchaTouch入门》PPT课件

1、概述
Sencha 特性 1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后
大约80KB，通过禁用一些组件还会使它更小。
2.支持世界上最好的设备。
3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组 自定义事件数据集成，如tap、swipe、pinch、rotate等。
1、概述--sencha
Sencha是由ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项 目。
Sencha Touch 是全球领先的应用程序开发框架，其设计旨在充分利用HTML5、 CSS3 和Javascript 来实现最高级别的功能、灵活性和优化。
Sencha Touch 是针对下一代具有触摸屏设备的跨平台框架。
第一个例子 新建文件
添加代码
example1.html
panel容器
基本信 息
ready函数
运行界面 调试程序在开发者模式
和调试js代码一样
例2
在代码的第20行后面加一句代码
我们把前面的例子改为如下形式，这是更为规范的 写法。 见 example2
example2.html 中 body 是空的 页面是由example2.js创建的。
4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件 模板，写入本地离线存储。
访问官网 https://www.sencha.com/products/touch/#overview
下载资源
https://www.sencha.com/products/touch/download/
Purchase a support subscription for direct access to Sencha technical support.
Note: You can find the Sencha Touch Commercial License Agreement and Maintenance and Support Agreement Байду номын сангаасn our website.
tabletStartupScreen 属性. 指定图标文件的名称,用作平板电脑上应用程序的开始 屏幕.
phoneStartupScreen 属性. 指定图标文件的名称,用作手机设备上应用程序的开始 屏幕.
icon 属性. 指定应用程序的默认图标文件名, icon.png.
glossOnIcon 属性. 指定是否要被应用到默认图标的光泽效果。在这种情况下，该 值设置为false，表示默认图标不增加光泽.
第11讲 Sencha Touch入门
请到 240FTP .../ HTML5移动Web开发 下载第11讲文件夹
主要内容
1.概述（ExtJS、 Sencha、Sencha Touch） 2.Sencha Touch基础知识
1、概述--ExtJS Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建的，使用到的都
b) 配置对象和配置选项 过去，我们习惯于使用预先定义好的参数来调用函数。这表示当调用函数时，必须
记住传入参数的顺序。代码如下： var test = new TestFuntion('LuLingNiu','38','240824399@qq.com'); 这种方式可能会带来以下3个问题： 需要函数调用者记住且不能改变传入参数的顺序。 不描述参数代表什么含义。 在实现可选参数时缺少灵活性。
邮箱里面会收到下载链接
Here are some resources to help you get started: ● Join the Sencha community forums. ● View our robust documentation for Touch. ● Sign up for online or on-site training. ● Questions? Feedback? Please contact us.
onReady 方法（launch方法）. 指定函数来运行,当浏览器的文档对象模型（DOM） 准备好之后,应用程序的HTML文件已加载.
2、sencha touch基础知识
a) 引例 b) 配置对象和配置选项 c) 应用程序的命名和启动 d) 面板组件 e) 对DOM访问和控制
下面详细解释一下前面的代码
是HTML、CSS、DIV等相关技术。
Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用 这些组件就能实现各种丰富多彩的UI的开发。
无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏 览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中 的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言 来操作DOM对象实现。
Thank you for being a part of the Sencha community. – The Sencha Team
下载得到的文件夹
课件文件夹中有 下载好的资源
2、sencha touch基础知识
a) 引例 b) 配置对象和配置选项 c) 应用程序的命名和启动 d) 面板组件 e) 对DOM访问和控制
1、概述--ExtJS 仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一
个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。
因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任 何DOM，Element对象中添加了一系列快捷、简便的实用方法。
1、概述--ExtJS 对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要
显示一棵树、要显示一个弹出窗口等。
因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component， 我们在编程时，只要使用这些组件Component即可实现相关数据展示及交互等， 而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依 次通过Element、DOM来生成最终的页面效果。