Border layout viewport
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
defaults : {
frame : true,
split : true
},
items : [
{
title : 'North Panel',
region : 'north',
height : 150,
minHeight : 120,
maxHeight : 150,
split : true,
collapsible : true
},
{
title : 'South Panel',
region : 'south',
height : 75,
split : false,
margins : {
top : 5
}
},
{
title : 'East Panel',
region : 'east',
width : 100,
minWidth : 75,
maxWidth : 150,
collapsible : true
},
{
title : 'West Panel',
region : 'west',
collapsible : true,
collapseMode : 'mini'
},
{
xtype : 'container',
region : 'center',
layout : 'fit',
id : 'centerRegion',
autoEl : {},
items : {
title : 'Center Region',
id : 'centerPanel',
html : 'Disposable',
frame : true
}
}
]
});
});
</script>
<div id='div1'>asdf</div>
</body>
</html>
Related examples in the same category