现在，TabPanel已经显示在屏幕上了，但我们主页的其实可以美化一下吧。
当前的页面至少有以下几个问题：
- 把标签放在顶部有点不大好看。
- 主页按钮似乎也有些单调。
- 没有任何内容。
看看我们是怎么做的，修改tabBarPosition配置项并添加一些HTML内容:
Ext.application({
name: 'Sencha',
launch: () {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
html: [
'<img 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("")
}
]
});
}
});
到目前为止，已经有了一些HTML内容了，但格式上效果还不是那么理想需要调整一下（点击预览按钮查看代码示例）。设置HTML内容的样式，为了达到更好的效果只要给panel添加cls配置项即可达到目标。只是增加了一个CSS类，就可以实现。在这里CSS定义在了examples/getting_started/app.css文件中。添加了CSS之后，我们的主页就变成了这个样子：
Ext.application({
name: 'Sencha',
launch: () {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img 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("")
}
]
});
}
});