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

来源：互联网发布：终极算法 epub 编辑：程序博客网时间：2024/05/01 04:52

效果图：

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);    }});