Sencha Touch 2.4简介

[TOC]

1.简介和安装

: Sencha Touch是一个基于HTML5的移动应用开发框架，支持Android,IOS，黑莓等平台,

可创造原生App般的体验。

1.1 安装

安装项目

功能

Sencha Cmd

核心功能

JRE 1.7

支持用java编写的Sencha Cmd

ruby

Sencha Touch用来编译CSS

Sencha Cmd

核心功能

所有资料位于 T:\BZU

第一个应用

部署于IIS

sencha -sdk \path\to\touch generate app MyApp \path\to\MyApp

sencha -sdk d:\touch-2.4.2 generate app MyApp d:\projects\myapp

??????????????

??????????? ?d:\projects\myapp

cmd?? sencha app build

??\build\production\myapp ?????????????

可以看到，一个sencha touch应用就是一个html,一个app.js，再加上处于app/model,app/view,app/controller目录下一堆model,view,controller文件的集合

1.1 参考文档

launch: function() {

var myPanel= Ext.create("Ext.tab.Panel", {

tabBarPosition: 'bottom',

id:'myPanel',

style:'backgroundColor:yellow',

html:'

Hello World

'});

Ext.Viewport.add(myPanel);

Ext.get('myPanel').addCls('myColor');

}

});

Sencha Touch类的使用

创建类:

Ext.define('Animal', {

config: {

name: null

},

constructor: function(config) {

this.initConfig(config);

},

speak: function() {

alert('grunt');

}

});

实例化:

var bob=Ext.create('Animal',{name:'Bob'});

bob.speak();

继承:

Ext.define('Human', {

extend: 'Animal',

updateName: function(newName, oldName) {

alert('Name changed. New name is: ' + newName);

}

});

静态成员:

Ext.define('Computer', {

statics: {

instanceCount: 0,

factory: function(brand) {

// 'this' in static methods refer to the class itself

return new this({brand: brand});

}

},

config: {

brand: null

},

constructor: function(config) {

this.initConfig(config);

// the 'self' property of an instance refers to its class

this.self.instanceCount ++;

}

});

xType

如果想直接用大括号{}来创建适用于容器内的组件，用xType比较方便。

Ext.application({

name : 'Sencha',

launch : function() {

Ext.create('Ext.Container', {

fullscreen: true,

layout: 'fit',

items: [

{

xtype: 'panel',

html: 'This panel is created by xtype'

},

{

xtype: 'toolbar',

title: 'So is the toolbar',

docked: 'top'

}

]

});

}

});

删除组件：清理内存

mainPanel.destroy();

2.一个Sencha应用的五个部分

一个Sencha应用由五部分组成：Model,View,Controller,Store和Profile。

2.1 Controller

控制器响应或侦听程序的事件。

2.1.1 自动实例化

2.1.2 命名对应要处理的数据模型类

应用名为MyApp,模型类为Product---->在路径app/controller/Products下创建

MyApp.controller.Products类

2.1.3 controller执行顺序：

a)controller的init方法

b)Profile的launch方法

c)Application的launch方法

d)controller的launch方法(主要逻辑放在这)

2.1.4 demo

Ext.define('MyApp.controller.Main', {

extend: 'Ext.app.Controller',

config: {

refs: {

nav: '#mainNav'

}

},

addLogoutButton: function() {

this.getNav().add({

text: 'Logout'

});

}

});

Ext.define('MyApp.controller.Main', {

extend: 'Ext.app.Controller',

config: {

control: { //control中可混合使用refs的键和ComponentQuery选择器作为control的key

loginButton: {

tap: 'doLogin'

},

'button[action=logout]': {

tap: 'doLogout'

}

},

refs: {

loginButton: 'button[action=login]'

}

},

doLogin: function() {

// called whenever the Login button is tapped

},

doLogout: function() {

// called whenever any Button with action=logout is tapped

}

});

control和refs的参数均为键值对

nav--->getNav()

值可以为用来查找组件的ComponentQuery选择器(在本例中为"#mainNav")。

2.1.5 路由

Ext.define('MyApp.controller.Users', {

extend: 'Ext.app.Controller',

config: {

routes: {

'login': 'showLogin',

'user/:id': 'showUserById'

},

refs: {

main: '#mainTabPanel'

}

},

showLogin: function() {

});

},

showUserById: function(id) {

}

});

2.1.6 Before过滤器

Ext.define('MyApp.controller.Products', {

config: {

before: {

editProduct: ['authenticate', 'ensureLoaded']

},

routes: {

'product/edit/:id': 'editProduct'

}

},

editProduct: function() {

},

authenticate: function(action) {

MyApp.authenticate({

success: function() {

action.resume();

},

failure: function() {

Ext.Msg.alert('Not Logged In', "You can't do that, you're not logged in");

}

});

},

ensureLoaded: function(action) {

Ext.require(['MyApp.custom.Class', 'MyApp.another.Class'], function() {

action.resume();

});

}

});

2.2 View

简单例子

app.js中

Ext.create('Ext.Panel', {

html:'Welcome to my app',

fullscreen:true

});

复杂一点的例子

app/view/Image.js

Ext.define('app.view.Image',{

extend:'Ext.Img',

requires:['Ext.MessageBox'],

config:{

title:null,

description:null

},

initialize:function(){

this.callParent(arguments); //确保父类的初始化函数被执行

this.element.on('tap',this.onTap,this);//绑定事件

},

onTap:function(){

Ext.Msg.alert(this.getTitle(),this.getDescription());

}

})

app.js

Ext.application({

name : 'Sencha',

launch : function(){

Ext.create("app.view.Image",{

title:'Orion Nebula',

description:'THe xdasdasdadadada',

src:'http://www.bz55.com/uploads/allimg/150309/139-150309101A8.jpg',

fullscreen:true

});

}

});

define方法中的一些参数：

extend,xtype,requires,config

2.3 Model

2.3.1 创建模型

Ext.define('MyApp1.model.User', {

extend: 'Ext.data.Model',

config: {

fields: [

{ name: 'id', type: 'int' },

{ name: 'name', type: 'string' }

]

}

});

2.3.2 关联关系

Ext.define('MyApp1.model.User', {

extend: 'Ext.data.Model',

config: {

fields: ['id', 'name'],

proxy: {

type: 'rest',

url : 'data/users',

reader: {

type: 'json',

root: 'users'

}

},

hasMany: 'Post' // shorthand for { model: 'Post', name: 'posts' }

}

});

Ext.define('Post', {

extend: 'Ext.data.Model',

config: {

fields: ['id', 'user_id', 'title', 'body'],

proxy: {

type: 'rest',

url : 'data/posts',

reader: {

type: 'json',

root: 'posts'

}

},

belongsTo: 'User',

hasMany: { model: 'Comment', name: 'comments' }

}

});

Ext.define('Comment', {

extend: 'Ext.data.Model',

config: {

fields: ['id', 'post_id', 'name', 'message'],

belongsTo: 'Post'

}

});

2.3.3 校验

app/model/User.js

Ext.define('MyApp1.model.User', {

extend: 'Ext.data.Model',

config: {

fields:['id', 'name', 'age', 'gender'],

validations: [

{ type: 'presence', field: 'name' },//必须存在

> { type: 'length', field: 'name', min: 5 },

{ type: 'format', field: 'age', matcher: /\d+/ },//匹配正则表达式

{ type: 'inclusion', field: 'gender', list: ['male', 'female'] },//白名单

{ type: 'exclusion', field: 'name', list: ['admin'] } //黑名单

],

proxy: {

type: 'rest',

url : 'data/users',

reader: {

type: 'json',

root: 'users'

}

}

}

});

app.js

Ext.application({

name : 'MyApp1',

launch : function(){

var newUser = Ext.create('MyApp1.model.User', {

name: 'admin',

age: 'twenty-nine',

gender: 'not a valid gender'

});

var errors = newUser.validate();

console.log('Is User valid?', errors.isValid());

console.log('All Errors:', errors.items);

console.log('Age Errors:', errors.getByField('age'));

}

});

2.3.4 proxy

proxy由store负责调用，用来为store加载和保存数据。

分为client和server两种

2.4 Store

2.5 Profile：配置

Ext.application({

name: 'MyApp',

profiles: ['Phone', 'Tablet']，

models: ['User', 'Product', 'nested.Order'],

views: ['OrderList', 'OrderDetail', 'Main'],

controllers: ['Orders'],

launch: function() {

Ext.create('MyApp.view.Main');

}

});

模板：

类的使用

Ext.define('My.sample.Person', {

name: 'Unknown',

constructor: function(name) {

if (name) {

this.name = name;

}

},

eat: function(foodType) {

alert(this.name + " is eating: " + foodType);

}

});

var aaron = Ext.create('My.sample.Person', 'Aaron');

aaron.eat("Salad"); // alert("Aaron is eating: Salad");

require属性:

Ext.define('Human', {

extend: 'Animal',

requires: 'Ext.MessageBox',

speak: function() {

Ext.Msg.alert(this.getName(), "Speaks...");

}

});

创建类会自动创建相应属性的get和set方法。

类的命名：

最好只包含字母， 数字(除非如Md5这样的专有名称)、_，- 等都不建议使用。

类应该归属于package包：

MyCompany.data.CoolProxy 顶级命名空间和实际类名遵从骆驼命名法，其他一律小写。即使首字母缩略语也应当使用骆驼命名法

Ext.data.HTMLParser----->Ext.data.HtmlParser

类名应该能映射到文件的实际存放目录

Ext.form.action.Submit类应该存储在：/Ext/form/action/Submit.js

其他

组件

组件

与用户交互的类

容器

var panel = Ext.create('Ext.Panel', {

html: 'This is my panel'

});

Ext.Viewport.add(panel);

最顶层的容器就是Viewport

布局

水平布局HBox

垂直布局VBox

卡片布局card

事件

添加事件的两种方式

没有组件实例时

Ext.application({

name: 'Sencha',

launch: function() {

var myButton = Ext.Viewport.add({

xtype: 'button',

centered: true,

text: 'Click me',

//第一种方式

listeners: {

tap: function() {

alert('First tap listener');

}

}

});

//第二种方式

myButton.on('tap', function() {

alert("Second tap listener");

});

myButton.un('tap', function() {

alert("Second tap listener");

});

}

});