source: trunk/web/addons/job_monarch/lib/extjs/examples/layout/column.html @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 3.9 KB
Line 
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       // NOTE: This is an example showing simple state management. During development,
44       // it is generally best to disable state management as dynamically-generated ids
45       // can change across page loads, leading to unpredictable results.  The developer
46       // should ensure that stable state ids are set for stateful components in real apps.
47       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
48
49       var viewport = new Ext.Viewport({
50            layout:'border',
51            items:[{
52                region:'west',
53                id:'west-panel',
54                title:'West',
55                split:true,
56                width: 200,
57                minSize: 175,
58                maxSize: 400,
59                collapsible: true,
60                margins:'35 0 5 5',
61                cmargins:'35 5 5 5',
62                layout:'accordion',
63                layoutConfig:{
64                    animate:true
65                },
66                items: [{
67                    html: Ext.example.shortBogusMarkup,
68                    title:'Navigation',
69                    autoScroll:true,
70                    border:false,
71                    iconCls:'nav'
72                },{
73                    title:'Settings',
74                    html: Ext.example.shortBogusMarkup,
75                    border:false,
76                    autoScroll:true,
77                    iconCls:'settings'
78                }]
79            },{
80                region:'center',
81                margins:'35 5 5 0',
82                layout:'column',
83                autoScroll:true,
84                items:[{
85                    columnWidth:.33,
86                    baseCls:'x-plain',
87                    bodyStyle:'padding:5px 0 5px 5px',
88                    items:[{
89                        title: 'A Panel',
90                        html: Ext.example.shortBogusMarkup
91                    }]
92                },{
93                    columnWidth:.33, 
94                    baseCls:'x-plain',
95                    bodyStyle:'padding:5px 0 5px 5px',
96                    items:[{
97                        title: 'A Panel',
98                        html: Ext.example.shortBogusMarkup
99                    }]
100                },{
101                    columnWidth:.33,
102                    baseCls:'x-plain',
103                    bodyStyle:'padding:5px',
104                    items:[{
105                        title: 'A Panel',
106                        html: Ext.example.shortBogusMarkup
107                    },{
108                        title: 'Another Panel',
109                        html: Ext.example.shortBogusMarkup
110                    }]
111                }]
112            }]
113        });
114    });
115        </script>
116</head>
117<body>
118<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
119  </body>
120</html>
Note: See TracBrowser for help on using the repository browser.