开始 Sencha Touch 2 之旅之二

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

当前的页面至少有以下几个问题：

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

看看我们是怎么做的，修改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("")

                }

            ]

        });

    }

});