如何使用sencha-touch控件显示平板上的tab界面

最新推荐文章于 2024-10-04 06:11:34 发布

CF西西

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量1.2k

点赞数

文章标签： stylesheet documentation url forms tabs html

本文链接：https://blog.csdn.net/xiaoguang44/article/details/6930291

版权

效果图：

html页面上的js引用：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">Pandora</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"/>
    <!--<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>-->
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app/view/index.js"></script>
</head>
<body>

</body>
</html>

index.js中代码

Ext.application({
    name: 'Sencha',

    launch: function () {
        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' }
                        ]
                    }
                }
            ]
        }).setActiveItem(1);
    }
});