首先安装Sencha Touch 2 SDK和SDK Tools,SDK Tools会在命令行中添加sencha命令,用于创建一个app或者将app打包成ios和android平台上的应用。
开始前的准备工作:
1、Web Server,如Apache。
2、Chrome浏览器。
将下载好的SDK压缩包解压到Web Server的www目录下,以便能够通过浏览器输入http://localhost/sencha-touch-2.1.0-gpl/来访问其自带的文档。
运行cmd.exe,cd到www/sencha-touch-2.1.0-gpl目录下,执行以下命令创建app。
sencha generate app Myapp ../Myapp
此时在www目录中会生成一个Myapp目录,目录结构如下:
- app - 目录中包含应用的Models, Views, Controllers和Stores
- app.js - 应用的主要入口
关于app各组成部分的解释,直接摘抄Sencha Touch文档中的原话:
Models: represent a type of object in your app - for example an e-commerce app might have models for Users, Products and Orders
Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch
Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly
Stores: are responsible for loading data into your app and power Components like Lists and DataViews
Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible
打开app.js,编辑如下代码:
// app.js
Ext.application({
name: 'Sencha',
profiles: ['Phone', 'Tablet'],
views: ['Home', 'Blog', 'Products', 'Contact'],
controllers: ['Main'],
launch: function() {
Ext.create('Sencha.view.Viewport');
}
});
在app.js的launch函数中,我们创建了一个“Sencha.view.Viewport"的对象。名字表示了该文件所在的目录,即app/view/Viewport.js,它的代码如下:
// Viewport.js
// define用于定义一个class,函数原型为
// define( String className, Object data, Function createdFn )
Ext.define('Sencha.view.Viewport', {
extend: 'Ext.TabPanel', // 继承Ext.TabPanel
// 每一个class都有一个config属性,用于配置class的内容、行为
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
xtype: 'homepanel'
},
{
xtype: 'blogpage'
},
{
xtype: 'productspage'
},
{
xtype: 'contactpage'
}
]
}
});
在Sencha Touch中, xtype类似于一个占位符(placeholder),当框架遇到xtype时会在后台自动实例化一个其对应的对象,因此不需要显示地调用Ext.create()来实例化对象,这样可以节约内存。
每一个class都有xtype属性,自定义class的xtype需要自行设定。在Viewport的items属性中,有四个object,每个object只有一个xtype属性,这里的每一个xtype对应着一个视图(View)。xtype相当于各个视图的引用,我们可以将视图的代码写在另外一个文件里,在其他的文件中引用它的xtype。
看看homepanel的代码:
// Home.js
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel', // custom xtype
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch 2</h2>'
].join("")
}
});
Home.js是一个View,所以把它放在app/view目录下。extend属性表明Home是一个Ext.Panel,它的xtype为'homepanel',我们在Viewport中引用了它的xtype。
来看看app中的Controller——Main,
// Controller
Ext.define('Sencha.controller.Main', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'button[action=submitContact]': {
tap: 'submitContactForm'
}
});
},
submitContactForm: function() {
console.log('test');
}
});
一个Controller都要继承Ext.app.Controller这个class。Controller的主要任务是监听View中发生的事件,然后执行相应的动作。在这里我们监听着一个含有属性"action=submitContact"的button,当用户点击它的时候就执行函数submitContactForm()。