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('toolbar-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 root = new Ext.tree.TreeNode({
text: '文件夹',
allowDrag: false,
allowDrop: false
});
root.appendChild([new Ext.tree.TreeNode({
text: '收件箱',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '发件箱',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '联系人',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '已删除的邮件',
allowDrag: false
})]);
var myData = [['张三', '测试', '2006-1-1'], ['李四', '测试一', '2006-5-6'], ['王五', '测试二', '2007-12-1'], ['刘六', '测试三', '2006-12-1'], ['张三', '测试四', '2007-6-1'], ['李四', '测试五', '2007-7-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试十', '2007-8-1'], ['张三', '测试十一', '2007-9-1'], ['李四', '测试十二', '2007-10-1'], ['王五', '测试十三', '2007-11-1'], ['刘六', '测试十四', '2007-8-1'], ['张三', '测试十五', '2007-9-1'], ['李四', '测试十六', '2007-10-1'], ['王五', '测试十七', '2007-11-1'], ['刘六', '测试十八', '2007-8-1']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [{
name: 'sender'
}, {
name: 'title'
}, {
name: 'sendtime'
}])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([{
header: '发送人',
width: 100,
sortable: true,
dataIndex: 'sender'
}, {
id: 'title',
header: '标题',
width: 100,
sortable: true,
dataIndex: 'title'
}, {
header: '发送时间',
width: 75,
sortable: true,
dataIndex: 'sendtime'
}]);
var viewport = new Ext.Viewport({
layout: 'border',
items: [new Ext.BoxComponent({
region: 'north',
el: 'north-div',
tbar: tb,
height: 26
}), new Ext.tree.TreePanel({
region: 'west',
contentEl: 'west-div',
title: '树列表',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 0',
root: root
}), {
region: 'center',
layout: 'border',
items: [new Ext.grid.GridPanel({
region: 'west',
el: 'center-center',
title: '条目列表',
ds: ds,
cm: colModel,
autoScroll: true,
split: true,
collapsible: true,
titlebar: true,
height: 200,
width: 200,
minSize: 100,
maxSize: 400
}), {
region: 'center',
contentEl: 'center-south',
title: '内容',
split: true,
collapsible: true,
titlebar: true,
collapsedTitle: '内容'
}]
}, new Ext.BoxComponent({
region: 'south',
el: 'south-div',
height: 24
})]
});
root.expand()
function onItemClick(item){
alert(item.text);
}
})
</script>
<body>
<div id="north-div">
<div id='toolbar-div'>
</div>
</div>
<div id="west-div">
</div>
<div id='center-center'>
</div>
<div id='center-south'>
</div>
<div id="south-div">
状态栏
</div>
</body>
</html>
[img]
http://lym6520.iteye.com/upload/attachment/78019/d67c0dde-31a6-32dc-9bc7-75c3ccfd8258.gif
[/img]