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
?myapp????????????IIS?,????,???????debug??
(IIS????MIME?? application/x-json
??:http://stackoverflow.com/questions/332988/get-iis6-to-serve-json-files-inc-post-get/1121114#1121114)
??????????????
??????????? ?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 参考文档
http://docs.sencha.com/touch/2.4/getting_started/getting_started.html
????:
Ext.application({
name:'Sencha',
launch: function() {
var myPanel= Ext.create("Ext.tab.Panel", {
tabBarPosition: 'bottom',
id:'myPanel',
style:'backgroundColor:yellow',
html:'<h1>Hello World</h1>'});
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) {
}
});
指向路径，调用相应的函数
http://myapp.com/#login --->调用 showLogin
http://myapp.com/#user/123 --->调用 showUserById
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");
});
}
});
