新建记事页的编写
下面我们编写新建记事页的页面，在这个页面中，可以完成记事的新增，删除和修改，先来看下我们要设计的页面如下：
▲页面设计图
而我们希望实际运行的效果如下图：
▲运行效果图
首先，我们还是把页面的面板设计出来，代码如下：
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id: 'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
}
]
});
id: 'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
}
]
});
其中，我们用到了Sencha Touch中的最基本的面板样式FormPanel，其中增加了一个文本框和一个文本区域输入框，并且在Title的required属性中，指定了标题是需要验证的，用户必须输入内容。
▲输入框效果图
接下来，为了快速先能看到运行效果，我们可以先修改主界面的items中的界面指定，代码如下：
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [NotesApp.views.noteEditor]
// 暂时注释掉 [NotesApp.views.notesListContainer]
});
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [NotesApp.views.noteEditor]
// 暂时注释掉 [NotesApp.views.notesListContainer]
});
可以看到运行效果如下：
接下来，继续往界面中增加工具条，首先是最上方的包含HOME和SAVE的工具条，代码如下：
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{
text: 'Home',
ui: 'back',
handler: function () {
// TODO: Transition to the notes list view.
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
// TODO: Save current note.
}
}
]
});
title: 'Edit Note',
items: [
{
text: 'Home',
ui: 'back',
handler: function () {
// TODO: Transition to the notes list view.
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
// TODO: Save current note.
}
}
]
});
其中，对于BACK按钮，指定了ui:back的样式，对于保存SAVE按钮，使用了ui:action的样式，这些都是sencha touch本身固定的样式，效果如下：
▲导航栏
接下来，我们设计页面下部，用于给用户删除记事的图标，代码如下：
NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
// TODO: Delete current note.
}
}
]
});
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
// TODO: Delete current note.
}
}
]
});
在这里，要注意我们是如何把垃圾站的图标放在最底部的，这里使用的是dock属性中指定为bottom,并请注意这里是如何把垃圾站的图标放到按钮中去的(iconCls属性指定了使用默认的垃圾站图标，而iconMask则指定了图标是在按钮中)。效果如下图：
▲垃圾站图标
现在我们看下把上部及下部的工具条都添加后的代码，如下所示：
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id: 'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
}
],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
NotesApp.views.noteEditorBottomToolbar
]
});
id: 'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
}
],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
NotesApp.views.noteEditorBottomToolbar
]
});
运行代码后，可以看到如下的效果：
▲运行效果图
好了，现在我们可以开始学习，如何从记事的列表中，点查看每个记事详细的按钮，而切换到查看具体的记事，以及如何点新增按钮，而切换到新增记事的页面
