Sencha Touch 程序设计体验之笔记本应用

这几天进行进行 webmobile App的设计，起初的设计方案采用的是 Jquery Mobile + PhoneGap，原想应该工作的不错，没想到到了最后，进行程序结合测试的时候出现了一个莫名奇妙的问题，那就是，利用Jquery Mobile进行页面切换，反复进行七次以上的连环页面跳转，同时在后台发送 Ajax数据请求，从服务器download数据，就会破坏PhoneGap的本地工作机制，导致后面的PhoneGap本地函数调用无法正常进行，PhoneGap的工作原理也是ajax通信机制，在环境出错的情况下，总是返回status
= 0的状态，无奈解决了两天还是没有彻底解决，现在着手试着另一套界面设计框架Sencha Touch。
学习Sencha Touch，改写了别人的一个APP，一个记事本程序，详细的E文请参照《writing
a sencha touch application》。
笔记本程序的运行效果图如下(分别是笔记列表和笔记编辑页面)：





当时设计该程序的代码基于Sencha Touch1.1.0，现在Sencha Touch已经发布了2.0版本，所以里面有很多代码已经无法正常工作了，本文还是按照作者当初的设计思路，重新基于Sencha Touch2.0进行了编码工作，程序已经可以正常运行，后面附上本程序的JS源码：
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);

}

})
有兴趣学习Sencha Touch的童鞋，该sample还是一个不错的入门选择，接下来再挑选几个不错的sample来update。