Sencha Touch中TabPanel组件的使用

最新推荐文章于 2018-11-07 19:00:58 发布

liuhenghui5201

最新推荐文章于 2018-11-07 19:00:58 发布

阅读量2.5k

点赞数

分类专栏： SenchaTouch

本文链接：https://blog.csdn.net/liuhenghui5201/article/details/23704023

版权

SenchaTouch 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

app.js

Ext.require('Ext.TabPanel');
Ext.application({
	name:'MyApp4',
	icon:'images/icon.png',
	glossOnIcon:false,
	phoneStarupScreen:'images/starUp.png',
	tabletStartupScreen:'images/tablet.png',
	launch:function(){
		var tabPanel=Ext.create('Ext.TabPanel',{
			id:'tabPanel',
			ui:'dark',
			tabBarPosition:'bottom',
			items:[{
				title:'主页',
				html:'主页',
				iconCls:'home'
			},{
				title:'合同',
				html:'合同',
				iconCls:'user'
			}]
		});
		Ext.Viewport.add(tabPanel);
	}
});

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Tab面板组件使用示例</title>
    
    <script type="text/javascript" src="sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
  	<link rel="stylesheet" href="sencha-touch.css" type="text/css"></link>
  	<style type="text/css">
		.bkColorPink{
			background-color: pink;
		}  	
		body{
			font-family: '宋体';
		}
  	</style>
  </head>
  <body>
  </body>
</html>

在需要SenchaTouch的一些必须的文件即可。

组织结构如下：

效果如下：

SenchaTouch中内置图标的样式名称及其显示效果

liuhenghui5201

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Sencha Touch中TabPanel组件的使用

app.jsExt.require('Ext.TabPanel');Ext.application({ name:'MyApp4', icon:'images/icon.png', glossOnIcon:false, phoneStarupScreen:'images/starUp.png', tabletStartupScreen:'images/tablet.png', l
复制链接

扫一扫