var App = new Ext.application({
name : 'NotesApp',
useLoadMask : true,
 
launch : function () {
notesListToolbar = Ext.create('Ext.Toolbar', {
id: 'notesListToolbar',
docked: 'top',
title: '记事本',
layout: 'hbox',
items: [
{ xtype: 'spacer' },
{
id: 'newNoteButton',
text: '新建笔记',
ui: 'action',
handler: function () {
var now = new Date();
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);
 
noteEditor.setRecord(note);
Ext.Viewport.setActiveItem('noteEditor', {type: 'slide', direction: 'left'});
}
}
]
});
 
Ext.regModel('Note', {
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: '请输入笔记的标题!' }
]
});
 
Ext.regStore('NotesStore', {
model: 'Note',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
},
getGroupString: function (record) {
if (record && record.data.date) {
return record.get('date').toDateString();
} else {
return '';
}
},
});
 
notesList = Ext.create('Ext.List', {
id: 'notesList',
store: 'NotesStore',
grouped: true,
emptyText: '<div style="margin: 5px;">目前还没有创建笔记.</div>',
loadingText: '正在读取笔记 ...',
itemTpl: '<div class="list-item-title">{title}</div>' +
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure: function (record) {
var selectedNote = record;
noteEditor.setRecord(selectedNote);
Ext.Viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
},
}
});
 
notesListContainer = Ext.create('Ext.Panel', {
id : 'notesListContainer',
layout : 'fit',
items: [notesListToolbar, notesList],
html: 'This is the notes list container'
});
 
noteEditorTopToolbar = Ext.create('Ext.Toolbar', {
title: '编辑笔记',
docked: 'top',
 
items: [
{
text: '记事本',
ui: 'back',
handler: function () {
Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: '保存',
ui: 'action',
handler: function () {
var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);
 
var errors = currentNote.validate();
if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('请等待...', errors.getByField('title')[0].getMessage(), Ext.emptyFn);
return;
}
 
var notesStore = notesList.getStore();
 
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}
 
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
 
notesList.refresh();
 
Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
 
noteEditorBottomToolbar = Ext.create('Ext.Toolbar', {
docked: 'bottom',
 
items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
var currentNote = noteEditor.getRecord();
var notesStore = notesList.getStore();
 
if (notesStore.findRecord('id', currentNote.data.id)) {
notesStore.remove(currentNote);
}
 
notesStore.sync();
 
notesList.refresh();
Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
 
noteEditor = Ext.create('Ext.form.FormPanel',{
id: 'noteEditor',
items: [
noteEditorTopToolbar,
{
xtype: 'textfield',
name: 'title',
label: '笔记标题',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: '笔记内容'
},
noteEditorBottomToolbar
]
});
 
mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout : 'card',
cardAnimation : 'slide',
items: [notesListContainer, noteEditor]
});
 
Ext.Viewport.add(mainPanel);
}
})