Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 aperonnet 1 
<html>
2 
<head>
3 
  <title>Column 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 
    <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
14 
	<style type="text/css">
15 
	html, body {
16 
        font:normal 12px verdana;
17 
        margin:0;
18 
        padding:0;
19 
        border:0 none;
20 
        overflow:hidden;
21 
        height:100%;
22 
    }
23 
	.x-panel-body p {
24 
	    margin:5px;
25 
	}
26 
    .x-column-layout-ct .x-panel {
27 
        margin-bottom:5px;
28 
    }
29 
    .x-column-layout-ct .x-panel-dd-spacer {
30 
        margin-bottom:5px;
31 
    }
32 
    .settings {
33 
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
34 
    }
35 
    .nav {
36 
        background-image:url(../shared/icons/fam/folder_go.png) !important;
37 
    }
38 
    </style>
39 
	<script type="text/javascript">
40 
 
41 
    Ext.onReady(function(){
42 
 
43 
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
44 
 
45 
       var viewport = new Ext.Viewport({
46 
            layout:'border',
47 
            items:[{
48 
                region:'west',
49 
                id:'west-panel',
50 
                title:'West',
51 
                split:true,
52 
                width: 200,
53 
                minSize: 175,
54 
                maxSize: 400,
55 
                collapsible: true,
56 
                margins:'35 0 5 5',
57 
                cmargins:'35 5 5 5',
58 
                layout:'accordion',
59 
                layoutConfig:{
60 
                    animate:true
61 
                },
62 
                items: [{
63 
                    html: Ext.example.shortBogusMarkup,
64 
                    title:'Navigation',
65 
                    autoScroll:true,
66 
                    border:false,
67 
                    iconCls:'nav'
68 
                },{
69 
                    title:'Settings',
70 
                    html: Ext.example.shortBogusMarkup,
71 
                    border:false,
72 
                    autoScroll:true,
73 
                    iconCls:'settings'
74 
                }]
75 
            },{
76 
                region:'center',
77 
                margins:'35 5 5 0',
78 
                layout:'column',
79 
                autoScroll:true,
80 
                items:[{
81 
                    columnWidth:.33,
82 
                    baseCls:'x-plain',
83 
                    bodyStyle:'padding:5px 0 5px 5px',
84 
                    items:[{
85 
                        title: 'A Panel',
86 
                        html: Ext.example.shortBogusMarkup
87 
                    }]
88 
                },{
89 
                    columnWidth:.33,
90 
                    baseCls:'x-plain',
91 
                    bodyStyle:'padding:5px 0 5px 5px',
92 
                    items:[{
93 
                        title: 'A Panel',
94 
                        html: Ext.example.shortBogusMarkup
95 
                    }]
96 
                },{
97 
                    columnWidth:.33,
98 
                    baseCls:'x-plain',
99 
                    bodyStyle:'padding:5px',
100 
                    items:[{
101 
                        title: 'A Panel',
102 
                        html: Ext.example.shortBogusMarkup
103 
                    },{
104 
                        title: 'Another Panel',
105 
                        html: Ext.example.shortBogusMarkup
106 
                    }]
107 
                }]
108 
            }]
109 
        });
110 
    });
111 
	</script>
112 
</head>
113 
<body>
114 
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
115 
  </body>
116 
</html>