使用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應用程序（五）