Set collapsible : true : Border Layout « Ext JS « JavaScript DHTML






Set collapsible : true

  
<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 for border layout
3.Set region height
4.Set region minHeight
5.Set region maxHeight
6.Set split: 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