现在&＃xff0c;TabPanel已经显示在屏幕上了&＃xff0c;但我们主页的其实可以美化一下吧。

当前的页面至少有以下几个问题&＃xff1a;

1. 把标签放在顶部有点不大好看。
2. 主页按钮似乎也有些单调。
3. 没有任何内容。

看看我们是怎么做的&＃xff0c;修改tabBarPosition配置项并添加一些HTML内容:

Ext.application({

    name: &＃39;Sencha&＃39;,

    launch: () {

        Ext.create("Ext.TabPanel", {

            fullscreen: true,

            tabBarPosition: &＃39;bottom&＃39;,

            items: [

                {

                    title: &＃39;Home&＃39;,

                    iconCls: &＃39;home&＃39;,

                    html: [

                        &＃39;&＃39;,

                        &＃39;

Welcome to Sencha Touch

                        "

You&＃39;re creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app

                        &＃39;

Sencha Touch (2.0.0pr1)

                    ].join("")

                }

            ]

        });

    }

});

到目前为止&＃xff0c;已经有了一些HTML内容了&＃xff0c;但格式上效果还不是那么理想需要调整一下&＃xff08;点击预览按钮查看代码示例&＃xff09;。设置HTML内容的样式&＃xff0c;为了达到更好的效果只要给panel添加cls配置项即可达到目标。只是增加了一个CSS类&＃xff0c;就可以实现。在这里CSS定义在了examples/getting_started/app.css文件中。添加了CSS之后&＃xff0c;我们的主页就变成了这个样子&＃xff1a;

Ext.application({

    name: &＃39;Sencha&＃39;,

    launch: () {

        Ext.create("Ext.TabPanel", {

            fullscreen: true,

            tabBarPosition: &＃39;bottom&＃39;,

            items: [

                {

                    title: &＃39;Home&＃39;,

                    iconCls: &＃39;home&＃39;,

                    cls: &＃39;home&＃39;,

                    html: [

                        &＃39;&＃39;,

                        &＃39;

Welcome to Sencha Touch

                        "

You&＃39;re creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app

                        &＃39;

Sencha Touch (2.0.0pr1)

                    ].join("")

                }

            ]

        });

    }

});