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

         本文是“ 使用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应用程序（五）