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






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