Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>