Set region for border layout : Border Layout « Ext JS « JavaScript DHTML






Set region for 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>
<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

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