主要採用的border佈局，將樹形結構的數據放置在border佈局的west區域；
爲了測試在底部增加了一些測試數據。
這裏通過讀取id和對比id來進行動態生成的
下面是效果的展示圖
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all.css" />
<link rel="stylesheet" type="text/css"
href="extjs6/build/classic/theme-crisp/resources/theme-crisp-all-debug.css" />
<script src="extjs6/build/ext-all.js"></script>
<script src="extjs6/build/ext-debug.js"></script>
<script src="extjs6/build/classic/locale/locale-zh_CN.js"></script>
<script src="extjs6/ext-bootstrap.js"></script>
<script type="text/javascript " src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var northItem={
region:'north',//如果採用border佈局，這個項一定要有
title:"標題"
};
//樹狀圖
var store=Ext.create('Ext.data.TreeStore',{
root:{//樹狀圖有且只有一個樹根
expanded:true,//這樹狀圖是可以打開葉子的
children:[
{
text:'大項目1',
expanded:true,
children:[
{
id:1,//爲下面的監聽事件所使用，且ID爲1
text:'項目1',
leaf:true//表明這裏是葉子，不再向下延伸，同時爲下面的監聽器所操作
},
{
id:2,
text:'項目2',
leaf:true
},
{
id:3,
text:'項目3',
leaf:true
}
]
},
{
text:'大項目2',
expanded:true,
children:[
{
id:4,
text:'項目4',
leaf:true
},
{
id:5,
text:'項目5',
leaf:true
}
]
}
]
}
});
var westItem={
region:'west',
xtype:'treepanel',
store:store,//添加樹狀圖
width:200,//這裏一定要設置好寬度，否則不顯示
rootVisible:false,//不顯示樹根
split:true,//可以自己調整其大小
collapsible:true,//可以摺疊
listeners:{
//如果項被點擊的話
itemclick:function(view,record,item){
//如果是葉子，對應上面的leaf==true
if(record.data.leaf){
//如果沒有與當前點擊項目id相同的的標籤頁的話 getCmp 返回一個ext組件
if(!Ext.getCmp(record.data.id)){
//則新建一個與當前點擊項目id相同的的標籤頁
console.log(Ext.getCmp("centerItem")+"123")
Ext.getCmp("centerItem").add({
title:record.data.text,
html:Ext.util.Format.date(new Date(),'H時i分s秒')+"",
listeners:{
//爲這個標籤頁的關閉增加監聽事件
removed:function(){
//在狀態欄中刪除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'關閉了：'+record.data.text+"！"});
},
activate:function(){
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'點擊了：'+record.data.text+"！"});
}},
closable:true//允許關閉，同時新建關閉按鈕
});
}
//有沒有這個標籤頁都激活這個標籤頁
Ext.getCmp("centerItem").setActiveTab(record.data.id);
//然後在狀態欄中刪除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'點擊了：'+record.data.text+"！"});
}
}
}
};
var southItem={
region:'south',
xtype:'panel',
id:'southItem',
title:'操作信息',
collapsible:true//可以摺疊
};
var eastItem={
region:'east',
};
var centerItem={
region:'center',
id:'centerItem',
xtype:'tabpanel'
};
Ext.create('Ext.container.Viewport',{
layout:'border',
renderTo:Ext.getBody(),
items:[northItem,westItem,southItem,eastItem,centerItem]
});
})
</script>
</head>
<body>
</body>
</html>