viewport佈局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>使用者登入介面</title>
<script typt="text/javascript" src="../ext/ext-all.js"></script>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" href="../css/工具和選單條.css"/>
</head>
<body>
<div id=""></div>
<script typt="text/javascript">
Ext.onReady(function () {
var viewport=new Ext.Viewport({
frame:true,
layout:'border',
renderTo:Ext.getBody(),
items:[{/*元素集*/
region:'north',
height:120,
bodyStyle:'background-image:url(../image/daohang.png); background-repeat:no-repeat; background-size:100% 100%;',
items:[{
buttons:[{
text:'關於我們',
iconCls:'aboutUs'
},{
text:'推出系統',
iconCls:'loginout'
}]
}]
},{/*元素集*/
region:'center',
xtype:'tabpanel',
items:[{
title:'首頁',
iconCls:'openFile',
bodyStyle:'background-image:url(../image/cengter.jpg); background-repeat:no-repeat;background-size:100% 100%;'
}]
},{/*元素集*/
title:'線上選課系統',
region:'west',
width:180,
collapsible:true,/*展開收縮*/
items:[{
items:[new Ext.tree.Panel({
border:false,/*去掉邊框*/
root:{/*節點，物件*/
text:'系統選單',
border:false,
expanded:true,/*展開狀態*/
children:[{
text:'使用者管理',
icon:'../image/tianjia.png',
children:[{
text:'新增使用者',
icon:'',
leaf:true
},{
text:'修改使用者',
icon:'',
leaf:true
},{
text:'刪除使用者',
icon:'',
leaf:true
},{
text:'查詢使用者',
icon:'',
leaf:true
}]
},{
text:'成績管理',
icon:'../image/tianjia.png',
children:[{
text:'查詢成績',
icon:'',
leaf:true
},{
text:'修改成績',
icon:'',
leaf:true
},{
text:'刪除成績',
icon:'',
leaf:true
},{
text:'查詢成績',
icon:'',
leaf:true
}]
},{
text:'課程管理',
icon:'../image/tianjia.png',
children:[{
text:'新增課程',
icon:'',
leaf:true
},{
text:'修改課程',
icon:'',
leaf:true
},{
text:'刪除課程',
icon:'',
leaf:true
},{
text:'查詢課程',
icon:'',
leaf:true
}]
},{
text:'報名管理',
icon:'../image/tianjia.png',
children:[{
text:'我要報名',
icon:'',
leaf:true
},{
text:'修改報名',
icon:'',
leaf:true
},{
text:'刪除報名',
icon:'',
leaf:true
},{
text:'查詢報名',
icon:'',
leaf:true
}]
}]
}
})]
}]
},{/*元素集*/
region:'south',
border:false,
height:30,
tbar:['當前登陸使用者：【admin】','->','地址：百度','版權所有，<a href="www.baidu.com">北方網</a>']
}]
});
});
</script>
</body>
</html>
