<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> 
 
    
     
  
  |