Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 aperonnet 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 
            });
36 
 
37 
            var item2 = new Ext.Panel({
38 
                 title: 'Accordion Item 2'
39 
            });
40 
 
41 
            var item3 = new Ext.Panel({
42 
                 title: 'Accordion Item 3'
43 
            });
44 
 
45 
            var item4 = new Ext.Panel({
46 
                 title: 'Accordion Item 4'
47 
            });
48 
 
49 
            var item5 = new Ext.Panel({
50 
                 title: 'Accordion Item 5'
51 
            });
52 
 
53 
            var accordion = new Ext.Panel({
54 
                region:'west',
55 
                margins:'5 0 5 5',
56 
                split:true,
57 
                width: 210,
58 
                layout:'accordion',
59 
                defaults: {html: '&lt;empty panel&gt;', cls:'empty'},
60 
                items: [item1, item2, item3, item4, item5]
61 
            });
62 
 
63 
            var viewport = new Ext.Viewport({
64 
                layout:'border',
65 
                items:[
66 
                    accordion, {
67 
                    region:'center',
68 
                    margins:'5 5 5 0',
69 
                    cls:'empty',
70 
                    bodyStyle:'background:#f1f1f1',
71 
                    html:'<br/><br/>&lt;empty center panel&gt;'
72 
                }]
73 
            });
74 
        });
75 
    </script>
76 
</head>
77 
<body>
78 
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
79 
</body>
80 
</html>