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