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风格。
Sencha Touch 之初接触的更多相关文章
- Sencha touch 初体验
一.什么是Sencha Touch? Sencha Touch是一个应用手持移动设备的前端js框架,与extjs是同一个门派的,它继承了extjs的优点和缺点.功能很强大,效果很炫丽,效率不高. 二. ...
- 关于sencha touch 的JSONP跨域请求的学习研究
此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新, ...
- ExtJS初接触 —— 了解 Ext Core
ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
- 【翻译】使用Sencha Touch开发Google Glass应用程序
原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...
- sencha touch的开源插件和例子
写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...
- 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP
参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用 经过差不多1 ...
- 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 环境安装篇
最近因为有个项目需要制作APP,考虑到需要兼容Android和IOS,所以想采用WebAPP的方式来开发.现在是从零开始学习之路,走起- 通过网上博客和论坛,开始安装了一堆软件: 1. Sench ...
- 初接触BurpLoader工具
初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...
- sencha touch打包成安装程序
为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...
随机推荐
- PHP_命名空间
namespace NS; define(__NAMESPACE__ .'\foo','111'); define('foo','222'); echo foo; // 111. echo \foo; ...
- Spring c3p0连接池配置
数据库连接池 数据库连接池的基本思想就是为数据库连接建立一个“缓冲池”.预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从“缓冲池”中取出一个,使用完毕之后再放回去.我们可以通过设定连接 ...
- HDU——1215七夕节（因数和）
七夕节 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- 将Linux下python默认版本切换成替代版本
本文链接自http://www.myhack58.com/Article/48/66/2016/71806.htm 当你安装 Debian Linux 时,安装过程有可能同时为你提供多个可用的 Pyt ...
- d3 使用数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue + django 的权限控制
用vue做前端页面, Django 提供api, 写了一个后台系统,结合方式是vue打包后的dist目录直接作为Django的静态目录, 这样的好处是不用配置Nginx具体的做法不在这里写了,记一下遇 ...
- centos 7安装golang1.10
一.安装&配置 官方下载包(一般需要梯子) https://golang.org/dl/ wget https://dl.google.com/go/go1.10.linux-amd64.ta ...
- 完美解决xhost +报错： unable to open display ""
https://blog.csdn.net/wojiuguowei/article/details/79201845
- AC日记——【模板】最小费用最大流 P3381
题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表 ...
- AC日记——dispatching bzoj 2809
2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3290 Solved: 1740[Submi ...