SenchaTouch2入门教程之MVC

基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架### Sencha Touch 2入门教程之MVC架构详解####一、Sencha Touch 2概述Sencha Touch是一款强大的移动应用开发框架，它使用HTML5和JavaScript技术来构建高性能的移动应用。作为世界上首个专注于HTML5的移动应用框架，Sencha Touch为开发者提供了丰富的UI组件库以及MVC（Model-View-Controller）架构的支持，使得开发者能够快速地构建出功能完善且外观美观的应用程序。 ####二、MVC架构介绍MVC架构是一种设计模式，它将应用程序分为三个核心组成部分：模型(Model)、视图(View)和控制器(Controller)。这种模式的主要目的是分离业务逻辑、用户界面和数据管理，从而提高代码的可维护性和可扩展性。 - **模型(Model)**：负责管理应用程序的数据和业务逻辑，通常包括对数据库的操作和数据的处理等。 - **视图(View)**：负责显示数据，即用户界面的构建。视图依赖于模型提供的数据，但不处理任何业务逻辑。 - **控制器(Controller)**：作为模型和视图之间的协调者，负责处理用户的输入并控制程序的流程。当用户与应用程序交互时，控制器接收这些输入，调用相应的模型进行数据操作，并更新视图。 ####三、开发前准备1. **下载Sencha Touch 2** -下载地址：[http://www.sencha.com/products/touch/download/](http://www.sencha.com/products/touch/download/) -从下载的包中提取`sencha-touch-all.js`和`sencha-touch.css`文件。 2. **选择合适的IDE** -推荐使用Aptana、Dreamweaver或Notepad++等工具。本文以Aptana为例。 -下载地址：[http://www.aptana.com/products/studio3/download](http://www.aptana.com/products/studio3/download) 3. **安装支持HTML5的浏览器** - Safari或Chrome等现代浏览器支持HTML5特性，适合测试Sencha Touch应用。 ####四、开发步骤1. **创建MVC目录结构** -创建项目目录，并在其下创建`app`文件夹，再在`app`文件夹内创建`controller`、`model`、`store`和`view`子文件夹。 -创建`resources`文件夹，在其中创建`css`和`js`子文件夹，分别放置`sencha-touch.css`和`sencha-touch-all.js`文件。 2. **编写MVC组件** - **编写TopToolBar.js**这个组件用于定义顶部工具栏，包括其样式和布局。 ```javascript Ext.define("MVC.view.TopToolBar", { extend: "Ext.Container", alias: "widget.toptoolbar", fullscreen: true, config: { items: [{ xtype: 'toolbar', docked: 'top', title: 'Login' }] } }); ``` - **编写Login.js**该组件整合了顶部工具栏、表单和底部工具栏，形成完整的登录界面。 ```javascript Ext.define("MVC.view.Login", { extend: "Ext.Container", alias: "widget.login", requires: ["MVC.view.TopToolBar"], config: { scrollable: { direction: 'vertical' }, items: [{ xtype: 'toptoolbar', docked: 'top' }] } }); ``` 3. **编写app.js** -在`app.js`中定义整个应用程序的配置信息，包括名称、模型、控制器、视图等。 ```javascript Ext.application({ name: "MVC", models: ["User"], controllers: ["Login"], views: ["Login"], launch: function() { console.log("app launch"); var login = { xtype: "login" }; } }); ``` ####五、总结通过以上步骤，我们成功地使用Sencha Touch 2构建了一个简单的登录界面，并运用了MVC架构来组织代码。MVC不仅帮助我们更好地组织代码，还提高了代码的复用性和可维护性。在实际开发中，还可以根据需要进一步扩展模型、视图和控制器的功能，以实现更复杂的应用场景。