extjs tabPanel
[align=center][align=center]extjs tabPanel入门
加载tabpanel的文本分2种，一种是加载前台div里的文本，另一种是js里添加html内容。js如下：
Ext.onReady(function() {
var tab1 = new Ext.TabPanel({
// defaults : {
[color=darkred][/color] // autoHeight : true
// },
height : 100,
width : 450,
activeTab : 0,
renderTo : 'div',
title : 'tab1',
items : [{
contentEl : 'tab1',
title : 'table'
}, {
contentEl : 'tab2',
title : 'table'
}]
});
var tab2 = new Ext.TabPanel({
renderTo : document.body,
height : 120,
width : 300,
// autoHeight:true,
// autoWidth:true,
activeTab : 1,
title : 'tab2',
items : [{
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}]
});
});
jsp页面如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="extjs3.4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs3.4/ext-all.js"></script>
<script type="text/javascript" src="extjs3.4/examples.js"></script>
<link rel="stylesheet" type="text/css" href="extjs3.4/examples.css" />
<script type="text/javascript" src="tabPanel.js"></script>
</head>
<body>
<div id="div">
<div id="tab1"class="x-hide-display">
访问方法
</div>
<div id="tab2"class="x-hide-display">
奉瓦
</div>
</div>
</body>
</html>
[align=center]
[/align][/align]
加载tabpanel的文本分2种，一种是加载前台div里的文本，另一种是js里添加html内容。js如下：
Ext.onReady(function() {
var tab1 = new Ext.TabPanel({
// defaults : {
[color=darkred][/color] // autoHeight : true
// },
height : 100,
width : 450,
activeTab : 0,
renderTo : 'div',
title : 'tab1',
items : [{
contentEl : 'tab1',
title : 'table'
}, {
contentEl : 'tab2',
title : 'table'
}]
});
var tab2 = new Ext.TabPanel({
renderTo : document.body,
height : 120,
width : 300,
// autoHeight:true,
// autoWidth:true,
activeTab : 1,
title : 'tab2',
items : [{
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}]
});
});
jsp页面如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="extjs3.4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs3.4/ext-all.js"></script>
<script type="text/javascript" src="extjs3.4/examples.js"></script>
<link rel="stylesheet" type="text/css" href="extjs3.4/examples.css" />
<script type="text/javascript" src="tabPanel.js"></script>
</head>
<body>
<div id="div">
<div id="tab1"class="x-hide-display">
访问方法
</div>
<div id="tab2"class="x-hide-display">
奉瓦
</div>
</div>
</body>
</html>
[align=center]