Sencha Touch 教程：从零开始构建移动应用
第一部分：Sencha Touch 简介
1 什么是 Sencha Touch？
Sencha Touch 是一个用于构建跨平台移动应用（iOS、Android、Windows Phone 等）的 JavaScript 框架，它使用 HTML5、CSS3 和 JavaScript 来创建具有原生应用体验和外观的 Web 应用。
- 核心特点：
- 基于 Web 技术： 使用 HTML5 构建 UI，CSS3 实现样式和动画，JavaScript 处理逻辑。
- 原生体验： 提供了大量与原生应用相似的 UI 组件（如列表、表单、导航栏、选项卡等）和触摸手势支持。
- 响应式设计： 自动适应不同尺寸的移动设备屏幕。
- 数据绑定： Sencha Touch 引入了强大的数据绑定机制，使得数据与 UI 的同步变得非常简单。
- MVC/MVVM 架构： 推荐使用 Model-View-Controller 或 Model-View-ViewModel 模式来组织代码，使应用结构清晰、易于维护。
2 为什么选择 Sencha Touch？
- 快速开发： 丰富的组件库和强大的工具（如 Sencha Cmd）可以大大加速开发进程。
- 跨平台一致性： 一套代码可以部署到多个移动平台，无需为每个平台单独开发。
- 成熟稳定： Sencha Touch 是一个发展多年的框架，拥有广泛的社区支持和成熟的解决方案。
3 何时选择 Sencha Touch？
- 需要构建一个功能复杂、交互丰富的移动 Web 应用。
- 项目要求代码高度可维护和可扩展。
- 团队熟悉或愿意学习 ExtJS/Sencha Touch 的开发模式。
第二部分：环境搭建
在开始之前,你需要准备以下工具：
- 浏览器： 推荐使用 Google Chrome，因为它有强大的开发者工具，方便调试。
- 代码编辑器： Visual Studio Code、WebStorm 或 Sublime Text 等都是不错的选择。
- Sencha Cmd： 这是 Sencha 的命令行工具，用于创建项目、生成代码、编译应用等，它是 Sencha 开发的核心。
安装 Sencha Cmd：
- 访问 Sencha Cmd 官方下载页面。
- 根据你的操作系统下载对应的安装包。
- 运行安装包,按照提示完成安装，安装后，你可以在命令行中输入
sencha命令来验证是否安装成功。
sencha -version # 应该会显示你安装的 Sencha Cmd 版本号
第三部分：创建你的第一个 Sencha Touch 应用
我们将使用 Sencha Cmd 来创建一个标准的项目结构。
步骤 1：创建新项目
打开你的终端或命令提示符,进入你希望存放项目的目录，然后运行以下命令：
sencha -sdk /path/to/your/sencha-touch-2.4.2 generate app MyFirstApp /path/to/your/project/directory
-sdk /path/to/your/sencha-touch-2.4.2：指定 Sencha Touch SDK 的路径，你需要先从 Sencha Touch 下载页面 下载 SDK 并解压。generate app：Sencha Cmd 的命令，用于生成一个新应用。MyFirstApp：你的应用名称（同时也是命名空间）。/path/to/your/project/directory：你希望创建项目的文件夹路径。
步骤 2：项目结构解析
创建成功后,你的项目目录会包含以下关键文件夹：
app/：最重要的目录，包含你的应用源代码。model/：存放数据模型。store/：存放数据存储，是模型的数据集合。view/：存放视图组件，如列表、面板等。controller/：存放控制器，处理业务逻辑和事件。Application.js：应用的入口文件。
index.html：应用的 HTML 入口点。app.json：应用的配置文件，定义了应用的资源（如 CSS、JS、图片等）。sencha.cfg：Sencha Cmd 的全局配置文件。packages/：存放 Sencha Touch 框架的核心代码。
步骤 3：运行应用
进入你的项目目录,然后启动开发服务器：
cd /path/to/your/project/directory sencha app watch
sencha app watch 命令会启动一个开发服务器，并监视文件变化，自动重新编译资源。
打开浏览器,访问 http://localhost:1841/（端口号可能会变，命令行会提示你），你应该能看到一个默认的 Sencha Touch 欢迎界面。
第四部分：核心概念详解
1 架构：MVC/MVVM
Sencha Touch 推荐使用架构模式来组织代码，最常见的是 MVC 和 MVVM。
- Model (模型): 定义数据结构，一个
User模型可以有name、email、age等字段。 - Store (存储): 模型的集合，负责数据的加载、排序、过滤等操作，你可以把它想象成一个数据表。
- View (视图): 用户界面，由各种组件（如
Ext.Container,Ext.List,Ext.Panel）组成，视图负责展示数据并响应用户交互。 - Controller (控制器): 应用的“大脑”，它连接 Model 和 View，处理用户事件（如点击按钮），并调用相应的业务逻辑。
- ViewModel (视图模型): 在 MVVM 模式中，ViewModel 是 View 和 Model 之间的桥梁，它封装了 View 所需的数据和逻辑，并通过数据绑定与 View 自动同步。
2 组件系统
Sencha Touch 应用是由组件树构建的，所有 UI 元素都是 Ext.Component 或其子类的实例。
- 容器: 可以包含其他组件的组件，如
Ext.Container,Ext.Panel,Ext.NavigationView。 - 布局: 定义容器内部子组件的排列方式，常用布局有：
fit：子组件填满整个容器。vbox：垂直排列子组件。hbox：水平排列子组件。card：子组件像卡片一样堆叠，一次只显示一个（常用于导航）。
第五部分：实战演练 - 构建一个简单的任务管理 App
我们将创建一个包含任务列表和添加任务功能的应用。
步骤 1：定义数据模型
在 app/model/ 目录下，创建一个 Task.js 文件：
// app/model/Task.js
Ext.define 'MyFirstApp.model.Task',
extend: 'Ext.data.Model'
config:
fields: [
{ name: 'id', type: 'int' }
{ name: 'taskName', type: 'string' }
{ name: 'completed', type: 'boolean', defaultValue: false }
]
步骤 2：创建数据存储
在 app/store/ 目录下，创建一个 Tasks.js 文件，用于存储我们的任务数据：
// app/store/Tasks.js
Ext.define 'MyFirstApp.store.Tasks',
extend: 'Ext.data.Store'
config:
model: 'MyFirstApp.model.Task'
data: [
{ taskName: '学习 Sencha Touch' }
{ taskName: '构建一个 App' }
]
proxy:
type: 'memory' // 使用内存代理，数据只在当前会话中有效
步骤 3：构建主视图
我们将创建一个主视图,它包含一个任务列表。
- 列表组件 (
Ext.List)：非常适合展示数据集合，它会自动与 Store 绑定。
在 app/view/ 目录下，创建一个 Main.js 文件：
// app/view/Main.js
Ext.define 'MyFirstApp.view.Main',
extend: 'Ext.Container'
config:
title: '任务列表'
layout: 'fit'
items: [
xtype: 'list'
title: '我的任务'
itemTpl: '<div class="{completed:task-completed}">{taskName}</div>'
store: 'Tasks'
onItemDisclosure: true # 显示一个箭头，方便以后添加点击事件
]
xtype: 'list'：使用Ext.List组件。itemTpl：列表项的 HTML 模板，这里我们简单显示任务名。store: 'Tasks'：将列表与Tasks存储绑定，Sencha 会自动将存储的数据渲染到列表中。onItemDisclosure: true：在列表项右侧显示一个箭头。
步骤 4：创建应用主界面
现在我们需要一个容器来放置我们的主视图,并创建一个导航栏。Ext.TabPanel 是一个很好的选择。
打开 app/view/Main.js，修改它，让它继承自 Ext.TabPanel：
// app/view/Main.js
Ext.define 'MyFirstApp.view.Main',
extend: 'Ext.TabPanel' // 改为继承 TabPanel
config:
tabBarPosition: 'bottom' # 底部选项卡
items: [
# 第一个选项卡：任务列表
title: '任务'
iconCls: 'home'
items: [
xtype: 'list' # 这里的列表将作为第一个选项卡的内容
title: '我的任务'
itemTpl: '<div class="{completed:task-completed}">{taskName}</div>'
store: 'Tasks'
onItemDisclosure: true
]
]
iconCls：指定一个图标，Sencha Touch 提供了一套内置图标。
步骤 5：配置应用入口
打开 app/Application.js，确保主视图被正确加载：
// app/Application.js
Ext.define 'MyFirstApp.Application',
extend: 'Ext.app.Application'
name: 'MyFirstApp'
views: [
'Main' # 告诉应用加载 Main 视图
]
onLaunch: function() {
// 启动时显示主视图
Ext.Viewport.add(Ext.create('MyFirstApp.view.Main'));
}
views: ['Main']：在requires数组中声明视图，确保它们被正确加载。onLaunch：当应用启动时，将主视图添加到Ext.Viewport（一个全屏的容器）中。
步骤 6：添加样式
为了让完成的任务有不同的样式,我们添加一点 CSS，打开 app/resources/css/app.css，添加：
/* app/resources/css/app.css */
.task-completed {
text-decoration: line-through;
color: #999;
}
步骤 7：运行并查看结果
确保你的 sencha app watch 正在运行，然后刷新浏览器，你应该能看到一个底部有“任务”选项卡的界面，里面列出了我们之前在 Store 中定义的两个任务。
第六部分：进阶主题
1 添加新功能
- 添加新任务： 你可以创建一个表单视图，并通过控制器来处理表单提交，将新数据添加到
TasksStore 中。 - 标记任务完成： 监听列表的
itemtap事件，然后更新对应任务的completed字段，由于数据绑定，UI 会自动更新。 - 删除任务： 可以在列表项上添加一个删除按钮，或者通过滑动操作来删除。
2 使用 Sencha Cmd 构建生产版本
当你完成开发后,需要将应用编译成优化过的、适合生产环境的版本：
sencha app build production
编译后的文件会生成在 build/production/MyFirstApp/ 目录下，你可以将这个目录下的所有文件部署到你的 Web 服务器上。
3 学习资源
- 官方文档： Sencha Touch API Documentation 是最权威的参考资料。
- Sencha Examples： Sencha Touch Examples 提供了大量可交互的示例代码，是学习组件用法的最佳途径。
- Sencha Fiddle： Sencha Fiddle 是一个在线的 Sencha Touch/ExtJS 代码编辑器和沙盒，你可以用它来快速创建和分享代码片段。
第七部分：Sencha Touch 的现状与未来
重要提示： Sencha Touch 已经于 2025年 5月 停止维护和销售，这意味着它不会再有新的功能更新、安全补丁或官方支持。
对于新项目，你应该考虑以下替代方案：
- 原生开发： 使用 Swift (iOS) 和 Kotlin (Android) 开发性能最好、体验最原生的应用。
- 跨平台框架：
- React Native：使用 JavaScript 和 React 构建原生 UI。
- Flutter：使用 Dart 语言和 Skia 渲染引擎，提供高性能和高保真度的 UI。
- Ionic/Angular：使用 Web 技术（HTML, CSS, JS）构建，然后封装在原生容器中。
Sencha Touch 是一个功能强大且设计优秀的移动 Web 开发框架，它深刻地影响了后来的前端框架（如 Vue.js、React 的响应式设计理念），虽然它已经停止维护，但学习其 MVC/MVVM 架构、组件化思想、数据绑定和布局系统 对于理解现代前端开发仍然非常有价值，如果你需要维护一个基于 Sencha Touch 的旧项目，这份教程将是一个很好的起点，对于新项目，请考虑使用目前更活跃和受支持的框架。
