开发sencha-touch2记事本应用教程

本文介绍了用Sencha Touch2框架开发一个手机记事本Notes App的案例。通过该教程,读者可以掌握Sencha Touch的MVC架构,了解Sencha Touch2的核心类概念和使用方法。 ###开发Sencha Touch2记事本应用教程####一、引言本文将详细介绍如何使用Sencha Touch 2框架开发一款手机记事本应用（Notes App）。通过本教程的学习，开发者不仅可以深入理解Sencha Touch 2的MVC架构，还能掌握其核心类的概念与实际应用方法。 ####二、项目概述##### 2.1记事本软件的功能列表- **创建便签**：允许用户新建便签。 - **编辑便签内容**：支持修改现有便签的文字内容。 - **删除便签**：提供删除不再需要的便签的功能。 - **展示当前保存的便签列表**：能够显示所有保存的便签列表。 - **在跨浏览器session时，保持便签**：确保即使用户关闭应用或浏览器，下次打开时仍能保留之前的便签。 ##### 2.2软件界面设计该记事本应用采用列表形式展示已有记录，主要分为两个视图： - **NotesListContainer**：展示所有便签的列表，其中包含一个工具栏和一个列表组件。 - **NoteEditor**：用户可以在这里创建、编辑和删除便签，视图中包括表单元素和一组工具栏。为了实现视图之间的导航，可以利用Sencha Touch自带的Viewport组件，它继承自Container类，默认采用全屏卡片布局。 ##### 2.3目录与文件组织为了更好地组织项目结构，可以按照以下方式划分目录： - **NotesApp**：项目主目录。 - **app.js**：启动代码。 - **app** - **controller**：存放控制器文件。 - **model**：存放数据模型文件。 - **profile**：存放配置文件。 - **store**：存放数据存储文件。 - **view**：存放视图文件。 - **index.html**：启动文件，加载Sencha Touch框架和应用入口文件。示例`index.html`文件结构如下： ```html My Notes App ``` ####三、详细步骤##### 3.1创建Sencha Touch应用实例需要在`app.js`文件中定义应用的入口。例如： ```javascript Ext.application({ name: 'NotesApp', autoCreateViewport: true, launch: function() { //应用启动逻辑} }); ``` ##### 3.2在Sencha Touch中继承类Sencha Touch支持类的继承。例如，创建一个基于`Ext.form.Panel`的自定义表单类： ```javascript Ext.define('NotesApp.view.NoteEditor', { extend: 'Ext.form.Panel', requires: [ 'Ext.TitleBar', 'Ext.field.TextArea' ], xtype: 'noteeditor', title: 'Edit Note', items: [{ xtype: 'textarea', name: 'content', fieldLabel: 'Content' }], dockedItems: [{ xtype: 'toolbar', dock: 'top', items: ['Save', '-', 'Cancel'] }); ``` ##### 3.3指定应用的依赖在应用的定义中，可以通过`requires`属性指定依赖的类或组件： ```javascript Ext.application({ name: 'NotesApp', requires: [ 'NotesApp.view.NotesListContainer', 'NotesApp.view.NoteEditor', 'NotesApp.store.Notes' ], autoCreateViewport: true, launch: function() { // ... } }); ``` ##### 3.4创建Sencha Touch控制器用于处理用户交互和业务逻辑。例如，创建一个控制器来处理便签列表： ```javascript Ext.define('NotesApp.controller.NotesListController', { extend: 'Ext.app.Controller', models: ['Note'], stores: ['Notes'], views: ['NotesListContainer'], init: function() { this.control({ '#noteslistcontainer': { itemtap: this.onNoteTap } }); }, onNoteTap: function(view, index, target, record) { //处理点击事件} }); ``` ##### 3.5处理Sencha Touch控制器中的视图事件在控制器中，可以使用`control`方法绑定视图事件。例如，在`onNoteTap`方法中处理点击事件： ```javascript onNoteTap: function(view, index, target, record) { var noteEditor = Ext.create('NotesApp.view.NoteEditor'); noteEditor.setValues(record.data); Ext.Viewport.add(noteEditor); } ``` ##### 3.6创建数据模型为了存储便签信息，我们需要定义一个数据模型： ```javascript Ext.define('NotesApp.model.Note', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'string' }, { name: 'content', type: 'string' } ] }); ``` ##### 3.7创建数据存储器负责读写数据。这里使用内存存储器作为示例： ```javascript Ext.define('NotesApp.store.Notes', { extend: 'Ext.data.Store', model: 'NotesApp.model.Note', data: [] }); ``` ##### 3.8总结通过以上步骤，我们已经完成了一个简单的Sencha Touch记事本应用的开发。这个过程中涵盖了从项目搭建到功能实现的全过程，包括了MVC架构的理解、视图组件的创建、数据模型与存储器的设计以及控制器的编写等方面。掌握了这些基础知识后，可以进一步扩展应用的功能，如增加云同步功能、添加更多视图效果等，为用户提供更丰富的体验。