Boder布局实例

最新推荐文章于 2024-07-12 16:11:40 发布

原创最新推荐文章于 2024-07-12 16:11:40 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML

Ext布局专栏收录该内容

3 篇文章

订阅专栏

<head>
<script type="text/javascript">
Ext.onReady(function(){
var mainMenu=new Ext.Panel({//创建一个面板
//renderTo:'mainMenu',//填充到id为show的区域
//title:'我的可折叠菜单',
width:160,
height:500,
layout:'accordion',//声明布局类型

layoutConfig: {
animate: true //动画效果启用
},

items:[{
title:'菜单1',
html:'<a href="http://www.baidu.com" >菜单1的内容</a>'//这里可用div，方便其他元素插入
}, {
title:'菜单2',
html:'菜单2的内容'
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[{
title: 'dfg',
region: 'north',
contentEl: 'north-div',
split: true,
border: true,
collapsible: true,
height: 100,
minSize: 50,
maxSize: 100
},{
title: 'south',
region: 'south',
contentEl: 'south-div',
split: true,
border: true,
collapsible: true,
height: 50,
minSize: 50,
maxSize: 120
},{
title: 'east',
region: 'east',
contentEl: 'east-div',
split: true,
border: true,
collapsible: true,
width: 120,
minSize: 120,
maxSize: 200

},

{
title: '我的菜单',
region: 'west',
contentEl: 'west-div',
split: true,
border: true,
collapsible: true,
width: 160,
minSize: 160,
maxSize: 160,
items:[mainMenu]
},{
title: 'center',
region: 'center',
contentEl: 'center-div',
split: true,
border: true,
collapsible: true
}]
});
});

</script>
</head>
<body>
<div id="north-div"></div>
<div id="center-div"></div>
<div id="west-div"></div>
<div id="east-div"></div>
<div id="south-div"></div>
</body>
</html>