开始 Sencha Touch 2 之旅之四
在文章的最后，我们回过头来再来添加一个联系表格。我们的最后一个tab，包含一个FromPanel和一个FieldSet：
//We've added a third and final item to our tab panel - scroll down to see it
Ext.application({
name: 'Sencha',
launch: () {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0pr1)</h2>'
].join("")
},
{
xtype: 'list',
title: 'Blog',
iconCls: 'star',
itemTpl: '{title}',
store: {
fields: ['title', 'url'],
data: [
{title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
{title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},
{title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
{title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
]
}
},
//this is the new item
{
title: 'Contact',
iconCls: 'user',
xtype: 'formpanel',
url: 'contact.php',
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Contact Us',
instructions: '(email address is optional)',
items: [
{
xtype: 'textfield',
label: 'Name'
},
{
xtype: 'emailfield',
label: 'Email'
},
{
xtype: 'textareafield',
label: 'Message'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: () {
this.up('formpanel').submit();
}
}
]
}
]
}).setActiveItem(2);
}
});
在第三个tab中，我们添加了一个包含三个字段和一个提交按钮的表格。在该页面我们使用了VBOX布局，布局来定位下方的提交按钮。fieldset本身配置了一个title 和一些 instructions(提示信息)。提示。最后，我们用了一个 textfield，一个emailfield 还有一个 textareafield。
关于本入门级文章的例子源代码你可以从下载的 Sencha Touch 2.0 SDK的开发包的 examples/getting_started文件目录中找到。
更多参考内容
迄今为止我们已经完成了一个非常基本的应用程序实例，应该需要进一步探索框架的其他内容了的时候了。在这里，我们有选择的提供一些开发指南和组件的实例供大家学习。并且随着Beta版的发展，我们也将会推出更多的指南用以构建更大规模的应用程序。