涉足了一下sencha touch ,它也属于ExtJs框架的一种,看了很多天,糊里糊涂的,虽然有API,可是不懂它的机制还是没啥用……

后来看了很多博文,才略懂一二啊

或者步骤可以这样说:

1、下载sencha touch 的开发文档,里面包括了example ,2.1.0版本及低版本的还包含API,新版本的连到了官网。
2、下载Sencha Cmd 工具,利用DOC命令,可以直接build一个app初版。
3、sencha touch 开发工具配置代码提示,具体方法可以网上再搜。

4、了解sencha touch 的机制:
网上看了很多入门代码,稍微总结一些心得,不知道是否正确,请大牛指教

(1)用DOC命令build出来的app初版里面包含以下

  • app – 放着模型(Models),视图(Views),控制器(Controllers)和存储(Stores)的目录。
  • app.js – 主Javascript入口,在这里开始编辑js。
  • app.json – 配置文件,用来创建你的应用的缩小(minified)版本。
  • index.html – 你的应用的HTML文件。
  • packager.json – 配置文件,用来打包成iOS和Android应用。
  • resources – CSS和图片。
  • sdk(touch) – Sencha Touch SDK的拷贝。你不应该修改这个文件夹中的内容。

(2) Ext.application()和Ext.setup()
一个app一开始,主函数是这两个的其中一个 。
Ext.setup() 是微型的,用于移动设备页面级别的构建;
而Ext.application() 可以实现Ext.Setup 的所有功能,并且创建应用对象,可以充分利用sencha创建的各种应用和功能。
从使用角度来看 Ext.application 适用于MVC框架(比较大型的项目),Ext.setup 则不适用。
Ext.applications 提供深度的应用的连接和访问历史的支持,通过路由引擎技术,可以实现页面的刷新及历史页面的回退等等功能。
Ext.applications()搭配 launch:function(){}

 Ext.application({ name: 'Sencha', launch: function() {} })

Ext.setup()搭配onReady:function(){}

 Ext.setup({ name: 'Sencha', onReady: function() {} })

(3)Ext.define(string,object)
Ext.define(string,object)是自定义添加类(组件),也很常用,不多解释,发链接好了
http://extjs.org.cn/node/544 (还有其他五篇,也可以看一下)
主要要注意的是,string 是类(组件)的名字,object是对象{},里面包含各种自定义的属性和方法
自定义出来的类(组件),使用前必须用Ext.creat()  new一下

(4)xtype和xclass ,声明类型
每当使用xtype,就要牵扯一些东西,应该说是前提吧

Ext.Loader.setPath({
'Ext': 'touch/src'   //这里用"Ext"代替组件的路径,在源文件那里可以找到组件的文件夹群,一般是在src下,而且一般app.js是跟touch同级
 });
Ext.application({
name: 'myapp',    //app的名字
requires: [             //xtype,要new对象(组件),要先requires它们
'Ext.MessageBox',    //这里是引用sencha touch自带的组件,Ext代表刚才设置的路径,后面的MessageBox等代表引用哪个组件
'Ext.Video',
'Ext.TitleBar'
],
launch:function(){}
})

当上面requires了组件之后,下面xtype就可以这样使用了

xtype: 'titlebar' //一般用在items下面的组件的属性

items : [{
 xtype : 'titlebar',
 docked : 'top',
 title : '预约看房',
 items : []
}]

===============华丽丽的分割线===============
xtype是xclass的简称
举例
先Ext.define()一个类

Ext.define({
 'AddressBook.view.Main',
{
......
}
})

然后创建并添加到viewport

Ext.Viewport.add({
 xclass: 'AddressBook.view.Main'
})

或者创建并添加到某容器里面

items : [{
 xclass : "AddressBook.view.Main"  //这样就整个组件了
}]

xclass 就等于 Ext.create(name)

Ext.Viewport.add( Ext.create( 'AddressBook.view.Main' ) )

注意:大括号没了

(5)xtype : ‘button’ 对应事件函数 handler : function(){}

暂时学到这点东西,如果有后续,会加上

Sencha Touch 2 快速入门系列:

http://blog.csdn.net/ardy_c/article/details/7419434

 
Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情
它只在有两根或多根手指放在屏幕上的时候触发
事件处理函数中会得到一个GestureEvent类型的参数
它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息
这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。
gesturestart // 当有两根或多根手指放到屏幕上的时候触发
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
gestureend // 当倒数第二根手指提起的时候触发,结束gesture
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend

Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation;
var scale = event.scale;

这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = ‘scale(‘ + e.scale + startScale + ‘) rotate(‘ + e.rotation +
startRotation + ‘deg)’;

ps:如果你要滚动body,只需要一根手指轻轻拂动屏幕,但是你要滚动一个内部div或者iframe,则需要动用两根手指。
我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。

© 2012 Hedgehog Suffusion theme by Sayontan Sinha