SenchaTouch2入门：MVC架构与登录界面开发

本文档是一篇关于 Sencha Touch 2 入门教程的MVC部分，主要讲解如何使用这个基于JavaScript的Ajax框架构建适用于移动设备的HTML5应用。Sencha Touch 是由ExtJS发展而来，它结合了JQTouch和Raphaël库，旨在提供现代触摸友好的Web应用程序开发体验。 首先，开发者需要进行开发前的准备工作，包括下载Sencha Touch 2的最新版本，可以从官方网址（http://www.sencha.com/products/touch/download/）获取sencha-touch-all.js和sencha-touch.css文件。推荐使用像Dreamweaver、Aptana、Notepad++等Web开发IDE，Aptana尤其适合，尽管也可以选择使用更轻量级的文本编辑器。此外，由于Sencha Touch对某些浏览器的支持有限，建议安装Safari或Chrome作为测试环境。 接下来，开发流程中会创建一个登录界面作为示例，通过MVC（Model-View-Controller）模式组织项目结构。MVC目录结构包含app、controller、model、store和view等子文件夹，每个子文件夹都有特定的功能： - controller负责处理用户交互逻辑和业务逻辑； - model管理应用程序的数据模型； - store负责数据存储和检索； - view负责界面显示和用户界面元素。 资源文件夹下，有css和js子文件夹，用于存放样式和脚本资源。在这个例子中，会创建index.html、app.js、以及Login相关的其他组件类文件，如Login.js（控制器）、User.js（模型）、TopToolBar.js（顶部工具栏视图）和Form.js（登录表单视图）等。 在编写TopToolBar.js时，声明MVC.view.TopToolBar，这是根据应用程序名称（在app.js的name属性中定义）和视图路径（MyApp/app/view/TopToolBar）来命名的。这部分代码展示了如何使用Sencha Touch的MVC模式来组织和管理视图组件，确保代码结构清晰且可维护。 总结来说，这篇教程详细介绍了如何使用Sencha Touch 2的MVC架构进行Web应用开发，包括项目设置、文件组织、视图与控制器的配合，以及如何通过代码实现顶部工具栏的视图。通过遵循这些步骤，初学者可以更好地理解和运用Sencha Touch框架来构建响应式、高性能的移动应用。