make sure the README will appear on github
[extjs.git] / 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