examples/layout/table.html

   1 <html>
   2 <head>
   3     <title>Table 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 11px verdana;
  16         }
  17         #main-panel td {
  18             padding:5px;
  19         }
  20     </style>
  21     <script type="text/javascript">
  22         Ext.onReady(function() {
  23             var panel = new Ext.Panel({
  24                 id:'main-panel',
  25                 baseCls:'x-plain',
  26                 renderTo: Ext.getBody(),
  27                 layout:'table',
  28                 layoutConfig: {columns:3},
  29                 // applied to child components
  30                 defaults: {frame:true, width:200, height: 200},
  31                 items:[{
  32                     title:'Item 1'
  33                 },{
  34                     title:'Item 2'
  35                 },{
  36                     title:'Item 3'
  37                 },{
  38                     title:'Item 4',
  39                     width:410,
  40                     colspan:2
  41                 },{
  42                     title:'Item 5'
  43                 },{
  44                     title:'Item 6'
  45                 },{
  46                     title:'Item 7',
  47                     width:410,
  48                     colspan:2
  49                 },{
  50                     title:'Item 8'
  51                 }]
  52             });
  53         });
  54     </script>
  55 </head>
  56 <body>
  57 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  58 </body>
  59 </html>