本文是“ 使用phoneGap和Sencha Touch 2开发Android应用程序”系列教程的第4章, 在这一章，我们会完成以下任务

• 在笔记编辑视图中添加删除功能。
• 在笔记编辑视图中，实现点击“返回”按钮回到笔记列表视图的功能。
• 编辑笔记列表视图，使之按照笔记创建日期分组显示：

从Sencha Touch 数据存储中删除记录

在笔记编辑视图中，当用户点击删除按钮时，删除操作就启动了：

为了实现删除操作，我们需要给NoteEditor视图类添加一个处理点击删除事件的方法（NoteEditor视图类定义为NoteEditor.js ）：

var deleteButton = {xtype: "button",iconCls: "trash",iconMask: true,handler: this.onDeleteButtonTap,scope: this
};

就像给保存按钮添加事件处理方法一样，我们使用handler和scope两个配置参数，用来映射处理按钮点击事件的方法，同样这个方法的作用域仅限于本视图类。

和之前一样，我们需要在NoteEditor视图类中添加一个 onDeleteButtonTap() 方法来向控制器传播事件。

onDeleteButtonTap: function () {console.log("deleteNoteCommand");this.fireEvent("deleteNoteCommand", this);
}

和之前处理新增动作类似，我们需要在控制器的control中定义用于捕捉来自于noteEditor视图中的deleteNoteCommand事件：

control: {notesListContainer: {// The commands fired by the notes list container.newNoteCommand: "onNewNoteCommand",editNoteCommand: "onEditNoteCommand"},noteEditor: {// The commands fired by the note editor.saveNoteCommand: "onSaveNoteCommand",deleteNoteCommand: "onDeleteNoteCommand"}
}

现在我们可以在onDeleteNoteCommand() 方法中实现删除笔记的逻辑：

    onDeleteNoteCommand: function(){// console.log("onDeleteNoteCommand");var noteEditor = this.getNoteEditor();// 当前编辑视图的引用var currentNote = noteEditor.getRecord();// 当前将被删除的笔记var notesStore = Ext.getStore("Notes");  // 本地数据库notesStore.remove(currentNote);   // 从库中移除当前笔记notesStore.sync();//返回列表视图this.activateNotesList();}

首先，在这里我们得到了当前所处于的编辑视图、将被删除的笔记以及本地的笔记库。请牢记，因为我们在refs配置参数中设置了noteEditor，所以可以使用框架为我们生成的getNoteEditor() 方法来获取当前编辑视图的引用。

refs: {// We're going to lookup our views by xtype.notesListContainer: "noteslistcontainer",noteEditor: "noteeditor"
}

接着将当前笔记从笔记数据存储中删除并提交到本地数据库：

notesStore.remove(currentNote);
notesStore.sync();

最后，从当前视图返回列表视图

this.activateNotesList();

连接上设备或者启动模拟器，看看删除功能是否能够正常生效。

返回主页面

为了让笔记编辑视图的返回按钮，能够使应用程序返回主视图（列表视图），而不保存编辑视图的改变，我们需要在Note Editor视图中给返回按钮添加单击事件的处理方法：

var backButton = {xtype: "button",ui: "back",text: "Home",handler: this.onBackButtonTap,scope: this
};

定义onBackButtonTap()方法来传播事件：

onBackButtonTap: function () {console.log("backToHomeCommand");this.fireEvent("backToHomeCommand", this);
}

在控制器中，添加对应backToHomeCommand事件的处理方法onBackToHomeCommand() ：

control: {notesListContainer: {// The commands fired by the notes list container.newNoteCommand: "onNewNoteCommand",editNoteCommand: "onEditNoteCommand"},noteEditor: {// The commands fired by the note editor.saveNoteCommand: "onSaveNoteCommand",deleteNoteCommand: "onDeleteNoteCommand",backToHomeCommand: "onBackToHomeCommand"}
}

在控制器中编写onBackToHomeCommand()方法：

onBackToHomeCommand: function () {console.log("onBackToHomeCommand");
this.activateNotesList();
}

在这个方法中，不需要任何逻辑处理，直接调用activateNotesList()方法返回主视图即可，接下来可以启动模拟器，看看实际的运行效果。

对Sencha Touch列表设置分组

现在我们来补充一个非常有用的功能：对保存的所有笔记按照创建日期进行分组显示。列表分组在Sencha Touch中非常容易实现。首先我们需要在Notes Store中定义一个grouper配置参数：

Ext.define("NotesApp.store.Notes",{extend:"Ext.data.Store",requires:"Ext.data.proxy.LocalStorage",config:{model:"NotesApp.model.Note",proxy : {type : "localstorage",id : "notes-app-store"},sorters:[{property:'dateCreated',direction:'DESC'}],grouper:{sortProperty:"dateCreated", // 按照创建日期进行分组direction : "DESC",  // 日期倒序分组groupFn :function(record){if(record && record.data.dateCreated){return record.data.dateCreated.toDateString();}else{return '';}}}}
});

在Sencha Touch的文档中没有对grouper进行很详细的解释，不过从上面的代码来看，grouper配置项并不是很难理解。groupFn方法负责生成分组的标签，在我们这个例子中，标签就是笔记创建的日期：

sortProperty指定了按照哪个属性对分组进行排序，如果没有定义这个配置项，将按照groupFn 方法的返回值进行排序，direction则指定了分组是按升序还是降序排列。

最后，我们需要在NoteList视图中添加与分组相关的配置参数：

Ext.define("NotesApp.view.NotesList",{extend:"Ext.dataview.List",alias:"widget.noteslist",config:{loadText:"正在加载笔记....",emptyText:'<div class="notes-list-empty-text">没有找到相关笔记。</div>',onItemDisclosure:true,grouped:true,itemTpl:'<div class="list-item-title">{title}</div><div class="list-item-narrative">{narrative}</div>'}
});

我们只需要设置grouped为true，列表就会自动按照Store中的分组定义进行分组，通过grouper配置项，我们就能非常方便的对列表进行分组显示。

现在我们来看一下分组之后的应用程序运行情况，启动模拟器，就能看到所有的笔记按照日期分组显示了：

总结

到目前为止，我们已经完成了新建、编辑和删除笔记的功能，而且实现了返回主列表视图的按钮功能。

我们对Notes List 进行了重构，使得所有笔记能够根据保存日期进行分组显示，分组列表显示使用户能够更方便的查看笔记。

在下一章中，我们将不再使用initialize方法来定义Notes List列表视图和Notes Editor编辑视图，而是采用配置参数的方式来定义。

未完待续!

下载

源代码已发布到迅雷快传：http://kuai.xunlei.com/d/KSTEBUJWKTMR

原文出自：  http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-4/

本教程快速链接

• 使用phoneGap和Sencha Touch 2开发Android应用程序（一）
• 使用phoneGap和Sencha Touch 2开发Android应用程序（二）
• 使用phoneGap和Sencha Touch 2开发Android应用程序（三）
• 使用phoneGap和Sencha Touch 2开发Android应用程序（四）
• 使用phoneGap和Sencha Touch 2开发Android应用程序（五）