Sencha Touch中的页面切换
我们先来看下，如何当用户点“New”按钮时，sencha touch如何从记事列表页面中切换到新建记事的页面中。代码如下：
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: 'notesListToolbar',
title: 'My Notes',
layout: 'hbox',
items: [
{ xtype: 'spacer' },
{
id: 'newNoteButton',
text: 'New',
ui: 'action',
handler: function () {
var now = new Date();
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);
NotesApp.views.noteEditor.load(note);
NotesApp.views.viewport.setActiveItem('noteEditor', {type: 'slide', direction: 'left'});
}
}
]
});
id: 'notesListToolbar',
title: 'My Notes',
layout: 'hbox',
items: [
{ xtype: 'spacer' },
{
id: 'newNoteButton',
text: 'New',
ui: 'action',
handler: function () {
var now = new Date();
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);
NotesApp.views.noteEditor.load(note);
NotesApp.views.viewport.setActiveItem('noteEditor', {type: 'slide', direction: 'left'});
}
}
]
});
请留意这里，我们补全了之前的新建按钮中的handler事件中的代码，下面逐一分析，首先先看这段代码：
var now = new Date();
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);
这里首先建立了一个空的note记事对象，其中该对象的date字段使用了当前的时间填充。
接下来，充分利用了sencha touch中的formpanel的load方法，该方法可以直接把用户在前端界面输入的内容包装成实体对象的对应属性，这里用：
NotesApp.views.noteEditor.load(note)。最后，我们要设置新增页面为可见，代码为：
NotesApp.views.viewport.setActiveItem('noteEditor', {type: 'slide', direction: 'left'});
通过NotesApp.views.viewport.setActiveItem方法，设置了noteEditor(新增记事页面)为活动页面，并且设置了出现的效果为slide滑动，方向为向左移动出现。
要记得，我们之前测试时，取消了主面板中的items中的新增记事页面，由于现在我们设置了转换，所以要重新加上，代码如下：
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
NotesApp.views.notesListContainer,
NotesApp.views.noteEditor
]
});
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
NotesApp.views.notesListContainer,
NotesApp.views.noteEditor
]
});
运行后，当点NEW按钮后，可以跳转到新增记事页面，如下图：
▲界面跳转
