ext之border布局一
<html pageEncoding="utf-8">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var tb = new Ext.Toolbar('north-div');//创建一个工具条
tb.add(new Ext.Toolbar.SplitButton({
text: '文件',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '新建',
handler: onItemClick
}, {
text: '保存',
handler: onItemClick
}, {
text: '加载',
handler: onItemClick
}]
}
}), new Ext.Toolbar.MenuButton({
text: '编辑',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '复制',
handler: onItemClick
}, {
text: '粘贴',
handler: onItemClick
}]
}
}));
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
border: false,
region: 'north',
contentEl: 'north-div',
tbar: tb,
height: 26
}, new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center-div',
title: '内容',
closable: true,
autoScroll: true
}]
}), {
region: 'south',
contentEl: 'south-div',
height: 28,
margins: '0 0 0 0'
}]
});
function onItemClick(item){
alert(item.text);
}
})
</script>
</head>
<body>
<div id="north-div">
</div>
<div id="center-div">
内容
</div>
<div id="south-div">
状态栏
</div>
</body>
</html>
效果图：
