使用phoneGap和SenchaTouch2开发Android应用程序（四）

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

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

        在笔记编辑视图中&＃xff0c;当用户点击删除按钮时&＃xff0c;删除操作就启动了&＃xff1a;

        为了实现删除操作&＃xff0c;我们需要给NoteEditor视图类添加一个处理点击删除事件的方法&＃xff08;NoteEditor视图类定义为NoteEditor.js &＃xff09;&＃xff1a;

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

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

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

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

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

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() 方法中实现删除笔记的逻辑&＃xff1a;

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

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

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

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

notesStore.remove(currentNote);
notesStore.sync();         最后&＃xff0c;从当前视图返回列表视图

this.activateNotesList();

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

返回主页面

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

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

        定义onBackButtonTap()方法来传播事件&＃xff1a;

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

        在控制器中&＃xff0c;添加对应backToHomeCommand事件的处理方法onBackToHomeCommand() &＃xff1a;

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()方法&＃xff1a;

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

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

对Sencha Touch列表设置分组

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

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:&＃39;dateCreated&＃39;,direction:&＃39;DESC&＃39;}],grouper:{sortProperty:"dateCreated", // 按照创建日期进行分组direction : "DESC", // 日期倒序分组groupFn :function(record){if(record && record.data.dateCreated){return record.data.dateCreated.toDateString();}else{return &＃39;&＃39;;}}}}
});

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

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

        最后&＃xff0c;我们需要在NoteList视图中添加与分组相关的配置参数&＃xff1a;

Ext.define("NotesApp.view.NotesList",{extend:"Ext.dataview.List",alias:"widget.noteslist",config:{loadText:"正在加载笔记....",emptyText:&＃39;

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

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

总结

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

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

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

        未完待续! 

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

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

本教程快速链接

• 使用phoneGap和Sencha Touch 2开发Android应用程序&＃xff08;一&＃xff09;
• 使用phoneGap和Sencha Touch 2开发Android应用程序&＃xff08;二&＃xff09;
• 使用phoneGap和Sencha Touch 2开发Android应用程序&＃xff08;三&＃xff09;
• 使用phoneGap和Sencha Touch 2开发Android应用程序&＃xff08;四&＃xff09;
• 使用phoneGap和Sencha Touch 2开发Android应用程序&＃xff08;五&＃xff09;