Sencha Touch中TabPanel组件的使用

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的一些必须的文件即可。

组织结构如下:

Sencha Touch中TabPanel组件的使用_第1张图片

效果如下:

Sencha Touch中TabPanel组件的使用_第2张图片Sencha Touch中TabPanel组件的使用_第3张图片


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

Sencha Touch中TabPanel组件的使用_第4张图片Sencha Touch中TabPanel组件的使用_第5张图片

你可能感兴趣的:(Sencha Touch中TabPanel组件的使用)