Sencha Touch 2.4簡(jiǎn)介
[TOC]
1.簡(jiǎn)介和安裝
: Sencha Touch是一個(gè)基于HTML5的移動(dòng)應(yīng)用開發(fā)框架，支持Android,IOS，黑莓等平臺(tái),
可創(chuàng)造原生App般的體驗(yàn)邮辽。
1.1 安裝
| 安裝項(xiàng)目 | 功能 |
|---|---|
| Sencha Cmd | 核心功能 |
| JRE 1.7 | 支持用java編寫的Sencha Cmd |
| ruby | Sencha Touch用來(lái)編譯CSS |
| Sencha Cmd | 核心功能 |
所有資料位于 T:\BZU
第一個(gè)應(yīng)用
部署于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 ?????????????
可以看到胸遇，一個(gè)sencha touch應(yīng)用就是一個(gè)html,一個(gè)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類的使用
創(chuàng)建類:
Ext.define('Animal', {
config: {
name: null
},
constructor: function(config) {
this.initConfig(config);
},
speak: function() {
alert('grunt');
}
});
實(shí)例化:
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);
}
});
靜態(tài)成員:
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
如果想直接用大括號(hào){}來(lái)創(chuàng)建適用于容器內(nèi)的組件，用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'
}
]
});
}
});
刪除組件：清理內(nèi)存
mainPanel.destroy();
2.一個(gè)Sencha應(yīng)用的五個(gè)部分
一個(gè)Sencha應(yīng)用由五部分組成：Model,View,Controller,Store和Profile。
2.1 Controller
控制器響應(yīng)或偵聽程序的事件怀愧。
2.1.1 自動(dòng)實(shí)例化
2.1.2 命名對(duì)應(yīng)要處理的數(shù)據(jù)模型類
應(yīng)用名為MyApp,模型類為Product---->在路徑app/controller/Products下創(chuàng)建
MyApp.controller.Products類
2.1.3 controller執(zhí)行順序：
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的參數(shù)均為鍵值對(duì)
nav--->getNav()
值可以為用來(lái)查找組件的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) {
}
});
指向路徑，調(diào)用相應(yīng)的函數(shù)
http://myapp.com/#login --->調(diào)用 showLogin
http://myapp.com/#user/123 --->調(diào)用 showUserById
2.1.6 Before過(guò)濾器
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
簡(jiǎn)單例子
app.js中
Ext.create('Ext.Panel', {
html:'Welcome to my app',
fullscreen:true
});
復(fù)雜一點(diǎn)的例子
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); //確保父類的初始化函數(shù)被執(zhí)行
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方法中的一些參數(shù)：
extend,xtype,requires,config
2.3 Model
2.3.1 創(chuàng)建模型
Ext.define('MyApp1.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
}
});
2.3.2 關(guān)聯(lián)關(guān)系
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 校驗(yàn)
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+/ },//匹配正則表達(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負(fù)責(zé)調(diào)用芯义，用來(lái)為store加載和保存數(shù)據(jù)哈垢。
分為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...");
}
});
創(chuàng)建類會(huì)自動(dòng)創(chuàng)建相應(yīng)屬性的get和set方法扛拨。
類的命名：
最好只包含字母耘分， 數(shù)字(除非如Md5這樣的專有名稱)、_鬼癣，- 等都不建議使用陶贼。
類應(yīng)該歸屬于package包：
MyCompany.data.CoolProxy 頂級(jí)命名空間和實(shí)際類名遵從駱駝命名法，其他一律小寫待秃。即使首字母縮略語(yǔ)也應(yīng)當(dāng)使用駱駝命名法
Ext.data.HTMLParser----->Ext.data.HtmlParser
類名應(yīng)該能映射到文件的實(shí)際存放目錄
Ext.form.action.Submit類應(yīng)該存儲(chǔ)在：/Ext/form/action/Submit.js
其他
組件
- 組件
與用戶交互的類 - 容器
var panel = Ext.create('Ext.Panel', {
html: 'This is my panel'
});
Ext.Viewport.add(panel);
最頂層的容器就是Viewport
布局
- 水平布局HBox
- 垂直布局VBox
- 卡片布局card
事件
添加事件的兩種方式
- 沒有組件實(shí)例時(shí)
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");
});
}
});
