Sencha Touch2 学习笔记（一）——创建一个app

首先安装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 OrdersViews: are responsible for displaying data to your users and leverage the built in Components in Sencha TouchControllers: handle interaction with your application, listening for user taps and swipes and taking action accordinglyStores: are responsible for loading data into your app and power Components like Lists and DataViewsProfiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible

打开app.js，编辑如下代码：

// app.jsExt.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.jsExt.define('Sencha.view.Home', {extend: 'Ext.Panel',xtype: 'homepanel',// custom xtypeconfig: {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，

// ControllerExt.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()。