Place elements to five parts of Border layout

  


<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>
<script type="text/javascript">

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var viewport = new Ext.Viewport({
      layout: "border",
      renderTo: Ext.getBody(),
      items: [{
        region: "north",
        xtype: 'panel',
        html: 'North'
      },{
        region: 'west',
        xtype: 'panel',
        split: true,
        collapsible: true,
        collapseMode: 'mini',
        title: 'Some Info',
        bodyStyle:'padding:5px;',
        width: 200,
        minSize: 200,
        html: 'West'
      },{
        region: 'center',
        xtype: 'panel',
        html: 'Center'
      },{
        region: 'east',
        xtype: 'panel',
        split: true,
        width: 200,
        html: 'East'
      },{
        region: 'south',
        xtype: 'panel',
        html: 'South'
      }]
    }); 
});



</script>
<body>
  <div id="people"></div>
  <div id="detail"></div>


</body>
</html>

Related examples in the same category

1.	Border layout viewport
2.	Set region for border layout
3.	Set region height
4.	Set region minHeight
5.	Set region maxHeight
6.	Set split: true,
7.	Set collapsible : true
8.	Set margin for region
9.	Set content panel for region
10.	Add form controls to center region
11.	Set border style for form panel
12.	Complex border layout

Place elements to five parts of Border layout : Border Layout « Ext JS « JavaScript DHTML

Related examples in the same category