box佈局
阿新 • • 發佈：2018-11-02
<!DOCTYPE html>
<html 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"/>
</head>
<body>
<div id=""></div>
<script typt="text/jjavascript">
Ext.onReady(function () {
var autoPanel=new Ext.panel.Panel({
title:'box佈局',
renderTo:Ext.getBody(),/*進行渲染*/
height:300,
width:400,
frame:true,
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
collapsible:true/*展開收縮*/
},
renderTo:Ext.getBody(),
items:[{/*元素集*/
title:'header',
fles:1,
html:'上邊部分/北邊'
},{/*元素集*/
title:'center',
fles:2,
html:'中間部分'
},{/*元素集*/
title:'east',
fles:3,
html:'右邊/東邊'
},{/*元素集*/
title:'west',
fles:3,
html:'左邊/西邊'
},{/*元素集*/
title:'footer',
fles:4,
html:'下邊部分/南邊'
}]
});
});
</script>
</body>
</html>