examples/layout/accordion.html

   1 <html>
   2 <head>
   3     <title>Accordion 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         .empty .x-panel-body {
  23             padding-top:20px;
  24             text-align:center;
  25             font-style:italic;
  26             color: gray;
  27             font-size:11px;
  28         }
  29     </style>
  30     <script type="text/javascript">
  31         Ext.onReady(function() {
  32
  33             var item1 = new Ext.Panel({
  34                 title: 'Accordion Item 1',
  35                 html: '&lt;empty panel&gt;',
  36                 cls:'empty'
  37             });
  38
  39             var item2 = new Ext.Panel({
  40                 title: 'Accordion Item 2',
  41                 html: '&lt;empty panel&gt;',
  42                 cls:'empty'
  43             });
  44
  45             var item3 = new Ext.Panel({
  46                 title: 'Accordion Item 3',
  47                 html: '&lt;empty panel&gt;',
  48                 cls:'empty'
  49             });
  50
  51             var item4 = new Ext.Panel({
  52                 title: 'Accordion Item 4',
  53                 html: '&lt;empty panel&gt;',
  54                 cls:'empty'
  55             });
  56
  57             var item5 = new Ext.Panel({
  58                 title: 'Accordion Item 5',
  59                 html: '&lt;empty panel&gt;',
  60                 cls:'empty'
  61             });
  62
  63             var accordion = new Ext.Panel({
  64                 region:'west',
  65                 margins:'5 0 5 5',
  66                 split:true,
  67                 width: 210,
  68                 layout:'accordion',
  69                 items: [item1, item2, item3, item4, item5]
  70             });
  71
  72             var viewport = new Ext.Viewport({
  73                 layout:'border',
  74                 items:[
  75                     accordion, {
  76                     region:'center',
  77                     margins:'5 5 5 0',
  78                     cls:'empty',
  79                     bodyStyle:'background:#f1f1f1',
  80                     html:'<br/><br/>&lt;empty center panel&gt;'
  81                 }]
  82             });
  83         });
  84     </script>
  85 </head>
  86 <body>
  87 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  88 </body>
  89 </html>