viewport布局中regoin为center是必不可以少的,其他的region可以没有
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>page.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script language="javascript">
var centerTabPanel;
function addNewTab(inputUrl,inputId){
alert("调用了id"+inputId);
alert("html---"+inputUrl);
var tabEle = centerTabPanel.getItem(inputId);
if(tabEle){
centerTabPanel.remove(tabEle,true);
}
tabEle=centerTabPanel.add({
closable:true,
id:inputId,
title:inputUrl,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+inputUrl+'></iframe>',
autoShow:true
});
centerTabPanel.setActiveTab(tabEle);
}
Ext.onReady(function(){
centerTabPanel=new Ext.TabPanel({
region:'center',
autoScroll:true,
animScroll:true,
resizTabs:true,
enableTabScroll:true,
activeTab:0,
deferredRender:false,
defaults: {
autoScroll:true
},
tabMargin:0,
items:[{
id:'mainFrame',
title: '工单管理系统',
iconCls:'icon-root-s',
html:'<div style="width:100%;height:100%;background:#90EE90"><iframe scrolling=auto frameborder=0 width=100% height=100% src="calendar.html"></iframe></div>',
autoScroll:true
}]
});
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"west",
width:100,
split:true,
collapsible: true,
fitToFrame: true,
closable:true,
title:"左边面板",
//margins:'0 0 0 2',
layout:'accordion',//下拉功能属性
layoutConfig:{
animate:true
},
items:[
{
id:'1',
title:'中国',
items:[{
id:'2',
//title:'广东'+'javascript:addNewTab(2'+',guangdong.html)'
//title:"<a href=javascript:addNewTab('guangdong.html',2)>广东</a>"
title:'<a href=javascript:addNewTab("guangdong.html",2)>广东</a>'
}
]
}
]},centerTabPanel]
});
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
var c1=new Ext.tree.TreeNode({
id:"c1",
text:"广东",
value:'xxxx'
});
var c2=new Ext.tree.TreeNode({
id:"c2",
text:"广西" ,
value:'xxxx'
});
var guangdong=['广州','东莞','深圳'];
var guangxi=['南宁','柳州','桂林'];
for(var i=0;i<guangdong.length;i++){
var gd=new Ext.tree.TreeNode({
text:guangdong[i],
value:'xxxx'
});
c1.appendChild(gd);
}
for(var j=0;j<guangxi.length;j++){
var gx=new Ext.tree.TreeNode({
text:guangxi[j],
value:'001'
});
c2.appendChild(gx);
}
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({
renderTo:"treediv",
root:root,
rootVisible:false,
width:100
});
tree.on("click",function(node,event){
var v=node.attributes.value
alert("您点击了"+v);
}
);
c1.on("click",function(node,event){
var v=node.attributes.value
alert("您点击了"+v);
//alert("您点击了"+node.value);
}
);
</script>
</head>
<body>
<div id="pageTest"></div>
</body>
</html>