验证用户的输入
接下来，我们来看下，保存记事前，如何做用户输入的校验。在当用户按保存按钮时，其逻辑如下：
1、如果用户没输入标题，则提示用户输入。
2、如果是新的一条记事，将会将其放到cache中，如果已经存在则更新。
3、最后更新记事列表。
在更新保存前，必须先进行校验，所以我们修改之前的Notes实体的检验规则，如下代码：
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: 'Please enter a title for this note.' }
]
});
这里，在title中，增加了message属性，即当用户没输入内容时显示提示的内容。接下来，我们完善保存的代码，如下：
title: 'Edit Note',
items: [
{
text: 'Home',
ui: 'back',
handler: function () {
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
noteEditor.updateRecord(currentNote);
var errors = currentNote.validate();
if (!errors.isValid()) {
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
}
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
下面分段讲解代码。首先在SAVE按钮的handler事件中，用变量noteEditor获得了当前新增界面NotesApp.views.noteEditor的实例，接着用getRecord()方法获得了用户在前端输入，已经装载封装好的Note对象，再使用updateRecord()方法，将需要更新的Note实体对象进行更新。
在调用currentNote.validate()的验证方法时后，可以用!errors.isValid()中判断是否校验成功或失败，当校验失败后，使用Ext.Msg.alert方法显示用户没填写记事的标题。
在通过校验后，使用notesList.getStore()获得当前浏览器中本地存储的数据集合，并且我们判断记录是否存在，如果不存在，则新增，否则更新，这个很容易实现，代码如下：
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
}
这里通过判断本地存储中是否有currentNote.data.id，从而得知是否为新增记录，如果没有，则调用add方法新增。
最后，如果是更新记录的话，调用sync方法将记录持续化保存到本地存储集中，再通过refresh刷新方法，刷新当前记事列表，并将页面切换到记事列表中，如下代码：
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
这里同样通过setActiveItem方法，切换到notesListContainer的记事列表界面。
同时，我们看下HOME按钮的编写，也是很简单，如下：
text: 'Home',
ui: 'back',
handler: function () {
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });'s next
}
}
