如图
是我做的截面，我在tabpanel中通过autoload加载某个页面ajax2.jsp.正常来说应该显示在tab里的，但是不知道为显示在最上边了。
如下是我的加载的代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>index</title>
</head>
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext-2.1/resources/css/ext-all.css">
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="<%=basePath%>ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>ext-2.1/ext-all.js"></script>
<script language="javascript">
<!--
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id:'viewport',
layout: 'border',
items:[
new Ext.Panel({
id: 'toppanel',
region: 'north',
buttonAlign: 'right',
height: 80,
frame: false,
baseCls: 'x-panel header_bg',
style: 'background: url(./images/header_bg.jpg);',
buttons:[
{text:'simple'},{text:'Englih'}
]
}),
{
xtype:"tabpanel",
activeTab: 0,
region:"center",
items:[
{
id:'centerpanel',
title:"tab1",
autoLoad: {url: 'th1/ajax2.jsp', nocache: true, scripts:true}
},
{title:"tab2",html:"111"},
{title:"tab3",html:"1222"},
{title:"tab4",html:"14444"},
{title:"tab5",html:"2222"}
]
}
]
});
//viewport.render('viewport');
})
//-->
</script>
<body>
</body>
</html>
如下是被加载的页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>ajax</title>
</head>
<script type="text/javascript" src="<%=basePath%>js/Portal.js"></script>
<script type="text/javascript" src="<%=basePath%>js/PortalColumn.js"></script>
<script type="text/javascript" src="<%=basePath%>js/Portlet.js"></script>
<script language="javascript">
//var tools = [{}];
var test1 = {
title: 'test1',
id: 'test1',
width: '90%',
html: '<iframe src="" />' };
var test2 = {
title: 'test2',
id: 'test2',
width: '90%',
html: '<iframe src="" />' };
var test3 = {
title: 'test3',
width: '90%',
id: 'test3',
html: "<iframe src='' />"};
var test4 = {
title: 'test4',
id: 'test4',
width: '90%',
frame: true,
html: "<iframe src='' />"};
Ext.onReady(function(){
var vp = new Ext.Viewport({
layout:'border',
autoScroll: true,
items:[
{
xtype: 'portal',
region: 'center',
autoScroll: true,
items:[
{
columnWidth:.30,
id: 'column0',
items:[test1,test2]
},
{
columnWidth:.40,
id: 'column1',
items:[test3]
},
{
columnWidth:.30,
id: 'column2',
items:[test4]
}
]
}
]
});
vp.render('all-demos');
//vp.doLayout();
});
</script>
<body>
<div id="all-demos"></div>
</body>
</html>
