使用phoneGap和Sencha Touch 2开发Android应用程序（四）
- 在笔记编辑视图中添加删除功能。
- 在笔记编辑视图中，实现点击“返回”按钮回到笔记列表视图的功能。
- 编辑笔记列表视图，使之按照笔记创建日期分组显示：
从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应用程序（五）