examples/layout/anchor.html

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