编辑记事
我们再来看下如何编辑记事。在记事列表中，当用户点每一条记事后的小图标，就会直接转换到编辑记事的页面，显示当前选择记事的内容，界面如下图：
▲记事列表界面显示
这里，我们补充完善之前的onItemDisclosure事件代码即可，如下：
id: 'notesList',
store: 'NotesStore',
onItemDisclosure: function (record) {
var selectedNote = record;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
itemTpl: '
<div class="list-item-title">{title}</div>' +
'<div class="list-item-narrative">{narrative}</div>',
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
}
}
});
还记得么?onItemDisclosure事件发生在LIST列表中当用户点每一项时，这里，我们用selectedNote变量获得了当前的记录，然后利用NotesApp.views.noteEditor.load方法，就可以在新增记事的页面中，把记录重新加载显示出来，十分方便。
删除记事
删除某一个记事时，用户点页面底部的垃圾桶图标即可，代码如下：
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
var currentNote = NotesApp.views.noteEditor.getRecord();
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('id', currentNote.data.id)) {
notesStore.remove(currentNote);
}
notesStore.sync();
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
同样，通过currentNote变量获得要删除的记录实例，然后用notesStore获得当前的本地存储集合，再通过findRecord方法去判断是否存在该记录，如果存在该记录，则调用remove方法进行删除，同样，跟保存记事的代码一样，要记得调用sync方法同步及调用refresh方法刷新记事列表。
将记事进行分组
我们这个教程中要做的最后一个例子，是按记事的日期进行分类排序，代码如下：
id: 'notesList',
store: 'NotesStore',
grouped: true,
emptyText: '<div style="margin: 5px;">No notes cached.</div>',
onItemDisclosure: function (record) {
var selectedNote = record;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-title">{title}</div>' +
'<div class="list-item-narrative">{narrative}</div>',
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
}
}
});
这里，设定了grouped的属性为true，表明列表的数据要进行分组处理，接下来，由于要根据日期进行分组，我们重写getGroupsString方法，如下代码：
model: 'Note',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-store'
},
getGroupString: function (record) {
if (record && record.data.date) {
return record.get('date').toDateString();
} else {
return '';
}
}
});
在getGroupsString中，返回的是根据什么字段去进行分组，这里将每条记录的日期转化为字符串返回，因为我们希望每个分组的标题为日期。运行后效果如图：
▲运行效果图
本教程的完整代码下载：
http://miamicoder.com/wp-content/uploads/2011/06/Notes-App-v1.0.zip
