使用phoneGap和Sencha Touch 2开发Android应用程序（四）

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

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

使用phoneGap和Sencha Touch 2开发Android应用程序（四）-LMLPHP

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

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

使用phoneGap和Sencha Touch 2开发Android应用程序（四）-LMLPHP

为了实现删除操作，我们需要给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方法负责生成分组的标签，在我们这个例子中，标签就是笔记创建的日期：

使用phoneGap和Sencha Touch 2开发Android应用程序（四）-LMLPHP

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/

本教程快速链接