您的位置：首页 > Web前端 > HTML

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

2011-11-02 22:47 501 查看

效果图：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： stylesheet documentation url forms tabs html

相关文章推荐

新的分享

章节导航