yufenghou
extjs 选项卡
<%@ 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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.toolbar.Toolbar工具栏</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" defer>
Ext.onReady(function()
{
//创建一个面板
var tabs = new Ext.TabPanel({
renderTo: 'hello',//放置到hello上面
width:450,//宽度为450
//height:200,
activeTab: 0,
frame:true,//带有框架
defaults:{autoHeight: true},//自动调节高度
items:[
{contentEl:'script', title: '子面板1'},//显示的内容是是script的内容
{contentEl:'markup', title: '子面板2'}//显示的内容是markupdiv的内容
]
});
//在创建一个面板
var tabs2 = new Ext.TabPanel({
renderTo: document.body,//放到body上面
activeTab: 0,
width:600,//宽度
height:250,//高度
plain:true,
defaults:{autoScroll: true},//滑动
items:[{
title: 'Normal Tab',
html: "My content was added during construction."//显示文本
},{
title: 'Ajax Tab 1',
autoLoad:'ajax1.htm'//载入一个网页
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}//载入一个带参数的网页
},{
title: 'Event Tab',
listeners: {activate: handleActivate},//如果这个选项卡被选中那么出发一个事件
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,//设置为不可见
html: "Can't see me cause I'm disabled"
}
]
});
function handleActivate(tab)
{
alert(tab.title + ' was activated.');
}
});
</script>
</head>
<body>
<div id="hello">
</div>
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
<br>
</body>
</html>