开始 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("")

                }

            ]

        });

    }

});

你可能感兴趣的:(Sencha Touch)