examples/layout/accordion.html

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