Sencha Touch 1.1培训教程第三章：Sencha Touch第一个例子

作者：廖 章     编辑整理：刚 子     来自：移动Web开发社区 

发环境的搭建与调试工具

Sencha Touch的开发环境搭建相当简单，在Eclipse中创建一个Web项目，定好项目的目录结构后，引入Sencha Touch的类库。 

Sencha Touch的调试工具，我主要是使用google的chrome浏览器（最新版本是chrome15.0.87），下载地址：http://www.google.cn/Chrome。

关于该浏览器及其调试的使用方法可参考：http://www.google.com/support/chrome/bin/static.py?page=guide.cs&guide=29302&hl=cn&printable=1。

 

第一个例子

按我们的通用平台架构，视图层使用了Freemarker模板，因此前台页面一般分为ftl文件和js文件。根据Sencha  Touch的特点以及我自己的思考，一个模块一般只需用一个ftl文件，然后在这个文件引入所需用的自定义的js文件(通用的组件js文件，可以考虑放入到freemarker模板中)。

以下就是第一个例子的ftl(stFirstExample.ftl)文件内容：

<@c2.touch title=""  cssList=[] jsList=['example/stFirstExample.js']>

</@c2.touch>

 

cssList是用来引入自定义的css3样式文件，jsList是用来引入所需的js文件。

js（stFirstExample.js）文件内容： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

//创建第一个示例的命名空间 Ext.ns('example', 'example.views');   //通过Ext.setup方法来参加一个sencha touch应用页面,setup方法里可以配置很多属性 Ext.setup({     statusBarStyle: 'light',       onReady: function() {                 //工具栏-toolbar                 var funBar = {                         xtype: 'toolbar',                             title: 'ST 第一个例子',                             dock: 'top', //工具栏放置的位置（必须的属性）：top-上,bottom-下,left-左,right-右                             scroll: 'horizontal',                             height: 30,                             items: [{                         xtype: 'button',                             text: '桌面',                                 ui: 'back',                     //iconMask: true,                         //iconCls: 'home',                         style: btStyle,                         handler: function(){                                                window.location = prefix + '/index.action';                         }                 }]                 };                   //主界面                 var viewport = new Ext.Panel({                     fullscreen: true,             monitorOrientation: true,                     dockedItems: [funBar],                     items: [{                         html: 'hello kitty......'                     }]             });             }     });

可以看到，stFirstExample.js 的第一行代码创建了两个命名空间：example和example.views。 
第二行代码调用了 Ext.setup() 方法，用以建立一个触控设备的 Web 页面，该方法可以为我们的应用设置不同的启动属性和行为：

• icon，设置该应用默认的图标； 
• tabletStartupScreen，该属性设置在平板电脑上的启动图标； 
• phoneStartupScreen，该属性设置在智能手机上的启动图标； 
• glossOnIcon，该属性设置是否在默认图标上呈现光环效果； 
• onReady，该方法会在页面加载完毕，浏览器中的 DOM 模型已经建立完成时被调用。由于为了保证程序在运行时所依赖的 JavaScript 文件都已经加载完毕，我们一般将应用启动的逻辑置于该方法内，类似于 Java 程序的 main 方法。

在onReady方法中，有一个地方我们需用注意的： 

• Ext.Panel对象的dockedItems属性，通过它可以在panel中放置工具栏等组件，可选值有：top-上,bottom-下,left-左,right-右。fullscreen属性为true（默认为false）则强制该panel充满整个屏幕。monitorOrientation属性为true则可以让panel面板监听屏幕方向发生变化时候的事件。
• dockedItems属性里的对象，必须由docked属性，用以指定放置的位置。 

当然js文件也可以通过另外一种方式创建应用： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

//通过Application来创建一个应用 var FirstApp = new Ext.Application({     name: 'firstApp', useLoadMask: true,       launch: function () {         //工具栏-toolbar         var funBar = {             xtype: 'toolbar',             title: 'ST 第一个例子',             dock: 'top', //工具栏放置的位置（必须的属性）：top-上,bottom-下,left-左,right-右             scroll: 'horizontal',             height: 30,             items: [{             xtype: 'button',                 text: '桌面',                 ui: 'back',                 //iconMask: true,                 //iconCls: 'home',                 style: btStyle,                 handler: function(){                                        window.location = prefix + '/index.action';                 }             }]         };           //主界面         var viewport = new Ext.Panel({             fullscreen: true, monitorOrientation: true,             dockedItems: [funBar],             items: [{                 html: 'hello kitty......'             }]         });     } });

Ext.Application实例的初始化，意味者一个sencha touch应用的建立，这个类的实例化后，会自动创建一个全局的变量FirstApp,并且同时建立了如下的命名空间： 

firstApp

firstApp.views

firstApp.stores

firstApp.models

firstApp.controllers

而launch的方法只会运行一次。

 

在 2012年01月10日 11:39 被 刚子 最后编辑