examples/layout/anchor.html

   1 <html>
   2 <head>
   3     <title>Anchor Layout</title>
   4     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
   5
   6     <!-- GC -->
   7     <!-- LIBS -->
   8     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
   9     <!-- ENDLIBS -->
  10
  11     <script type="text/javascript" src="../../ext-all.js"></script>
  12
  13     <style type="text/css">
  14         html, body {
  15             font: normal 12px verdana;
  16             margin: 0;
  17             padding: 0;
  18             border: 0 none;
  19             overflow: hidden;
  20             height: 100%;
  21         }
  22     </style>
  23     <script type="text/javascript">
  24         Ext.onReady(function() {
  25             var viewport = new Ext.Viewport({
  26                 layout:'anchor',
  27                 anchorSize: {width:800, height:600},
  28                 items:[{
  29                     title:'Item 1',
  30                     html:'Content 1',
  31                     width:800,
  32                     anchor:'right 20%'
  33                 },{
  34                     title:'Item 2',
  35                     html:'Content 2',
  36                     width:300,
  37                     anchor:'50% 30%'
  38                 },{
  39                     title:'Item 3',
  40                     html:'Content 3',
  41                     width:600,
  42                     anchor:'-100 50%'
  43                 }]
  44             });
  45         });
  46     </script>
  47 </head>
  48 <body>
  49 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  50 </body>
  51 </html>