Window layout: absolute : Layout « Ext JS « JavaScript DHTML






Window layout: absolute

  

<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() {


    var myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : 'absolute',
      autoScroll : true,
      id         : 'myWin',
      border     : false,
      items      : [
        {
          title : 'Panel1',
          x      : 50,
          y      : 50,
          height : 100,
          width  : 100,
          html   : 'x: 50, y:100',
          frame  : true
        },
        {
          title  : 'Panel2',
          x      : 90,
          y      : 120,
          height : 75,
          width  : 77,
          html   : 'x: 90, y: 120',
          frame  : true
        }
      ]
    });
    
    myWin.show();



});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Set anchor perentage
2.Use minor value as the anchor value
3.Use minor anchor value to layout the form
4.Use two anchor value to layout form
5.Window fit layout
6.Absolute position layout