Sencha Touch 之初接触

1、Sencha Touch开发与普通web开发有什么区别？

Sencha Touch（为方便起见，本文后面一律简写为ST）页面的开发跟普通html页面相比，总体来说没有本质上的区别，只是引入了对html5和CSS3的支持，然后提供了对移动设备（iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等）的特殊优化。事实上也正是因为html5和CSS3才使得ST可以实现如此美妙以至于可以媲美Native应用程序的交互效果。

2、特殊的Document标记

ST页面的Document标记比较特殊，在html标签之前，使用如下标签来声明此文档是html5格式：

<!DOCTYPE html>

　　

3、使用ST首先要在html代码的<head>区引入必须的公共CSS和JS文件：

    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch.js"></script>

需要注意的是，除sencha-touch.css外，ST提供了android.css/apple.css/bb6.css等三个css文件，分别对应android风格/apple风格/黑莓6三种不同的Theme，引用不同的css文件即可实现页面Theme的切换。

4、一个ST应用的通常模样

引入公共文件之后，当然就要编写自己应用程序的脚本了，如我们在大多数ST应用的例子中所见，通常情况下，应用程序脚本是写在单独的js文件中进行调用的（好处可以参见.net编程中code-behind和code-beside的对比），因此，一个常见的ST文档往往大致是这个模样：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="sencha-touch.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <link href="sencha-touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

　　

5、现在，我们关注的焦点将会转移到app.js这个文件了，因为它才是ST页面开发的核心。

通过我们对官网SDK中的Examples和同样出自官网的quick start代码进行分析，发现ST应用首页的js脚本（可以理解为启动程序）常用编写方式有两种：

A、Examples中采用的 —— Ext.setup方式

//使用setup来启动主程序
Ext.setup({
    tabletStartupScreen: ‘tablet_startup.png‘, //tablet设备时主屏中间出现的背景图片
    phoneStartupScreen: ‘phone_startup.png‘, //phone设备时主屏中间出现的背景图片
    icon: ‘icon.png‘, glossOnIcon: false, //跟Extjs一样，主程序代码卸载onReady里面
    onReady: function(options) {
        //TODO
    }
});

B、quick start中采用的 —— Ext.Application方式

new Ext.Application({
    launch: function() {
        //TODO
    }
});

由于这里我们只关注ST应用的启动代码，所以具体界面实现代码省略。对于上述两种方式的区别，鄙人暂时无力进行解读，欢迎高手指教。

6、ST如何判断终端设备类型？

我们知道，既然ST是专为移动设备而设计，那么在我们的应用第一次被访问的时候，判断客户端设备的类型是非常重要的，在ST中，我们可以这样判断：

        if (Ext.is.Phone) {
            //所有手机设备
        }
        if (Ext.is.Android) {
            //所有Android设备
        }
        if (Ext.is.BlackBerry) {
            //黑莓手机
        }
        if (Ext.is.iPad) {
            //iPad平板电脑
        }
        ……

当然关于设备类型还有很多其他判断属性，你可以参照ST的文档说明http://docs.sencha.com/touch/1-1/#!/api/Ext.is

7、设计一个漂亮的Demo

好了，几个前提问题基本解决，现在我们尝试写一个比HelloWorld更复杂一些的启动页面，来找一找成就感。先看原型图：

非常简单的一个登陆界面，我们确定使用apple风格的theme，使之更贴近Native的感觉。注：此例只考虑界面的实现，因此使用Ext.Panel控件进行布局设计。

8、一步步实现这个Demo

下面对实现代码按照步步深入的方式进行一下分解说明：

第一步：

//第一步：放置一个Ext.Panel，使之充满屏幕
Ext.setup({
    icon: ‘icon.png‘,
    tabletStartupScreen: ‘tablet_startup.png‘,
    phoneStartupScreen: ‘phone_startup.png‘,
    glossOnIcon: false,
    onReady: function() {

		//判断是否是手机设备，只有手机设备才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({  //使用一个Panel来填满屏幕
				fullscreen: true,  //是否全屏，选择true则横竖屏切换时仍可以保证自动适应尺寸
				id: ‘content‘,
				scroll: ‘vertical‘,  //滚动方向
				html: ‘这里放置内容‘,  //Panel里面放置的内容
				layout: {type: ‘vbox‘, align: ‘center‘},  //布局方式，vbox纵向布局，且每行内容居中
				items: [],  //这里放置容器内部的子元素
				dockedItems: []  //这里放置Panel本身所拥有的dock元素（你可以理解为自带工具栏）
			});
		}
	}
});

现在只有一个空容器充满屏幕，里面显示了几个汉字，看演示效果（Android 2.3，下同）

第二步：

//第二步：给Panel添加一个顶部工具栏，用来显示程序标题
Ext.setup({
    icon: ‘icon.png‘,
    tabletStartupScreen: ‘tablet_startup.png‘,
    phoneStartupScreen: ‘phone_startup.png‘,
    glossOnIcon: false,
    onReady: function() {

		//判断是否是手机设备，只有手机设备才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: ‘content‘,
				scroll: ‘vertical‘,
				layout: {type: ‘vbox‘, align: ‘center‘},
				html: ‘这里放置内容‘,
				items: [],

                                //前面我们说过，Panel自带的工具栏要放置在dockedItems里面
                                //现在我们添加顶部的工具栏
				dockedItems: [
					{
						id: ‘status‘,  //给他一个ID
						xtype: ‘toolbar‘,  //xtype类型是toolbar，完整的xtype枚举见这里http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
						ui: ‘light‘,  //light表示浅色的背景图案
						dock: ‘top‘,  //工具栏放置在最顶部
						title: "Sencha Touch Demo"  //工具栏的标题
					}
				]

			});
		}
	}
});

效果图显示，我们已经有了一个顶部工具栏，显示应用程序的名称

第三步：

//第三步：给Panel添加底部工具栏
Ext.setup({
    icon: ‘icon.png‘,
    tabletStartupScreen: ‘tablet_startup.png‘,
    phoneStartupScreen: ‘phone_startup.png‘,
    glossOnIcon: false,
    onReady: function() {

		//判断是否是手机设备，只有手机设备才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: ‘content‘,
				scroll: ‘vertical‘,
				layout: {type: ‘vbox‘, align: ‘center‘},
				html: ‘这里放置内容‘,
				items: [],
				dockedItems: [
                                        //这里是刚才的顶部工具栏
					{
						id: ‘status‘,
						xtype: ‘toolbar‘,
						ui: ‘light‘,
						dock: ‘top‘,
						title: "Sencha Touch Demo"
					},
                                        //这里是新增加的底部工具栏
					{
						xtype: ‘toolbar‘,
						dock: ‘bottom‘,  //在这里声明工具栏附着在底部
						ui: ‘dark‘,  //深色背景图案
                                                //又看到了items，显然ST的items是可以嵌套的，好吧，我们一口气把这个工具栏上的按钮也给加上
						items: [
							{
								xtype: ‘button‘,  //左侧一个button
								ui: ‘drastic‘,  //drastic是button的颜色和样式定义
								text: ‘忘记密码‘  //不解释
							},
							{xtype: ‘spacer‘},  //这个需要解释一下，spacer会自动充满剩余空间
							{
								xtype: ‘button‘,  //最右侧的button
								ui: ‘action‘,  //action样式是蓝色
								text: ‘注册使用‘
							}
						]
					}
				]
			});
		}
	}
});

现在看起来更像样一些了，底部工具栏也已经齐备

第四步：

//第四步：顶部底部工具栏都已经ok，现在我们要给Panel添加内容
//回头看一下原型图，我们需要再Panel内部自上到下放置一个logo图片和一个表单
//表单包含了账号和密码两个文本框，其中密码是掩码框，然后是一个登录按钮和一个链接

Ext.setup({
    icon: ‘icon.png‘,
    tabletStartupScreen: ‘tablet_startup.png‘,
    phoneStartupScreen: ‘phone_startup.png‘,
    glossOnIcon: false,
    onReady: function() {

		//判断是否是手机设备，只有手机设备才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: ‘content‘,
				scroll: ‘vertical‘,
				layout: {type: ‘vbox‘, align: ‘center‘},
                                //由于使用items设计Panel的内部元素，所以把html属性注掉
                                //其实不注也不会出错，html的内容会被显示在最底部
				//html: ‘这里放置内容‘,

				items: [
                                        //从上往下第一个元素，logo图片
					{
						xtype: ‘container‘,  //使用普通的Container容器即可
						height: 98,  //高度要跟图片尺寸相适应，由于我在下面html代码中给图片加了16px的margin-top，所以Container高度设置成图片高度+16，防止图片显示不完整
						width: 96,  //图片的宽度
						html: ‘<img src="logo.png" style="margin-top: 16px;" />‘  //直接设定html代码来显示图片，注意有16像素的顶部margin
					},
                                        //从上往下第二个元素，form表单
					{
						xtype: ‘form‘,  //xtype为form
						id: ‘loginForm‘,  //为便于操作form，给它一个id
                                                //表单内有不止一个元素，因此又要给它添加items
						items: [
						{
							xtype: ‘fieldset‘,  //加一个fieldset，可以将两个文本框放在一个圆角域组里面，更美观
							margin: ‘-2 0 16 0‘,  //使用margin调整与上面元素和下面元素之间的空隙
                                                        //fieldset里面包含两个文本框
							items: [
							{
								xtype: ‘textfield‘,  //第一个文本框
								name: ‘account‘,  //name用来获取值
								placeHolder: ‘您的账号‘,  //默认显示在文本框里的文字，点击和输入时它会消失
								required: true,  //必填字段
								useClearIcon: true  //输入内容后文本框后面会出现一个清空按钮
							},
							{
								xtype: ‘passwordfield‘,  //密码文本框
								name: ‘password‘,
								placeHolder: ‘您的密码‘,
								required: true,
								useClearIcon: true
							}
							]
						},
                                                //提交按钮，放在fieldset外面是为了使之与fieldset等宽
						{
							xtype: ‘button‘,
							text: ‘登录STDEMO‘,
							ui: ‘confirm‘  //绿色按钮
						},
                                                //再用一个Container来放置链接文字
						{
							xtype: ‘container‘,
							html: ‘<div style="width: 100%; text-align: center;"><a style="font-size: 14px; color: blue;">需要合作？请联系我们……</a></div>‘,
							margin: ‘16 0 0 0‘
						}
						]
					}
				],
				dockedItems: [
					{
						id: ‘status‘,
						xtype: ‘toolbar‘,
						ui: ‘light‘,
						dock: ‘top‘,
						title: "Sencha Touch Demo"
					},
					{
						xtype: ‘toolbar‘,
						dock: ‘bottom‘,
						ui: ‘dark‘,
						items: [
							{
								xtype: ‘button‘,
								ui: ‘drastic‘,
								text: ‘忘记密码‘
							},
							{xtype: ‘spacer‘},
							{
								xtype: ‘button‘,
								ui: ‘action‘,
								text: ‘注册使用‘
							}
						]
					}
				]
			});
		}
	}
});

显然这是最复杂的一步，不过只要学得耐心点，一样不成问题

到目前为止，我们的设计意图已经实现，最下面的链接由于屏幕高度问题被盖住了，向上拖动即可显示出来。最后再来一个全屏的效果：

怎么样？还不错吧，是不是很有Native的感觉？如果你喜欢的话，我们还可以换换Theme来看看。

第五步：切换Theme

上面这个是Sencha Touch风格

这个是Android风格

这个是BlackBerry6风格。

时间： 2024-12-08 14:50:52

Sencha Touch 之初接触的相关文章

Sencha touch 初体验

一.什么是Sencha Touch? Sencha Touch是一个应用手持移动设备的前端js框架,与extjs是同一个门派的,它继承了extjs的优点和缺点.功能很强大,效果很炫丽,效率不高. 二.例子来了 效果图:Sencha touch官方一个list的example PS:模拟器访问本地server的地址是10.0.2.2:8080,而不是127.0.0.1:8080 1.导入touch的相关js,css以及资源文件 2.index.html 1: <!DOCTYPE html> 2:

关于sencha touch 的JSONP跨域请求的学习研究

此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新,并发送请求到我自己写的服务程序端,由于服务程序和此SENCHA的程序不再一个域下,总是出现请求出错(提示的大概信息就是跨域的问题).这两天真是被这个问题折磨的很久,由于没接触过sencha touch 的JSONP,开始也是一头雾水,也看了好多的资料.最终理解了SENCHA里的jsonp的请求模式.

github的初接触

使用GitHub步骤: 1.申请GitHub帐户 xxx ,创建名为new-project的新Repository 2.安装Git客户端(Linux) #yum install git git-gui                 //我使用的是opensuse,直接在软件仓库搜索的git 3. 生成密钥对,这样项目可以push到 GitHub上 #ssh-keygen -t rsa -C "你的邮箱地址" 4.将.ssh/id_rsa.pub拷贝到GitHub网站 在github,

HTML5开发移动web应用——Sencha Touch篇(7)

Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.DomHelper.append('my-div',{ id:'url-list', tag:'ul', //指定追加的元素种类 cn:[//或children.使用数组形式定义数组内的子元素 { tag:'li',, cn:[{ tag:'a', html:'google', href:'http:

HTML5开发移动web应用——Sencha Touch篇(8)

DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户.目前,如何更好地可视化是许多公司或框架都在追求的.通过数据的可视化可以发现数据之间的规律,预测未来的情况.下面我们就看看Sencha Touch中是怎么进行数据可视化的. 由于DataView组件内容非常多,所以将在以后的一段时间内持续这一部分的学习. 首先废话不多说,直接上使用DataView组件的代码框架. launch:function(){ var

HTML5开发实战——Sencha Touch篇(1)

学习了许多基本的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建.先要解决的是前端的问题,从最简单的入手,一个基本的登录界面. 最简单的登录界面大体由以下介个元素组成:用户头像部分.用户名输入部分.密码输入部分.提交按钮.我们从这种虽简单的界面开始,逐步进行界面实现. 一.创建主面板 Ext.require('Ext.Panel'); Ext.application({ name:'MyApp'

前端是Sencha Touch+ Cordova(转)

从13年初开始,我的关注点一直在两个点上,一个是股票,一个是移动前端和大数据技术,互联网金融的发展会让互联网证券越来越火热,当然,我也希望将这两个关注点结合到一起,做一些事情. 现在,我的APP和微信公众号已经上线,每天下班都会花一个多小时的时间在他们的开发上,每天白天脑子里基本都在想,怎么去改进.完善.还能做哪些有意义的新功能,然后晚上把代码写出来,这期间不仅有技术上的补充,还包括对股市投资的一些知识补充,我老婆说我已经着了魔了,陪她出来逛街时都不在状态.. 随着对股票投资的理解,我的APP的

【瞎折腾系列】mysql存储过程初接触

开始[瞎折腾系列],这个系列纯属瞎折腾,可能没有什么实际意义. mysql存储过程生成表: 新建一张user表,包含id, username , password , usertable字段. 然后创建存储过程: create PROCEDURE create_table() BEGIN DECLARE n int DEFAULT 0; DECLARE t_error INTEGER DEFAULT 0; DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET

cglib初接触

直接上代码吧. pom添加依赖: <dependencies> <dependency> <groupId>cglib</groupId> <artifactId>cglib-nodep</artifactId> <version>3.1</version> </dependency> <dependency> <groupId>org.ow2.asm</groupId