Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[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     <style type="text/css">
6     html, body {
7         font:normal 12px verdana;
8         margin:0;
9         padding:0;
10         border:0 none;
11         overflow:hidden;
12         height:100%;
13     }
14     .x-panel-body p {
15         margin:5px;
16     }
17     .x-column-layout-ct .x-panel {
18         margin-bottom:5px;
19     }
20     .x-column-layout-ct .x-panel-dd-spacer {
21         margin-bottom:5px;
22     }
23     .settings {
24         background-image:url(../shared/icons/fam/folder_wrench.png) !important;
25     }
26     .nav {
27         background-image:url(../shared/icons/fam/folder_go.png) !important;
28     }
29     </style>
30 <script type="text/javascript" src="../../bootstrap.js"></script>
31 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
32 <script type="text/javascript">
33 Ext.require(['*']);
34
35     Ext.onReady(function(){
36
37        // NOTE: This is an example showing simple state management. During development,
38        // it is generally best to disable state management as dynamically-generated ids
39        // can change across page loads, leading to unpredictable results.  The developer
40        // should ensure that stable state ids are set for stateful components in real apps.
41        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
42
43        var viewport = Ext.create('Ext.Viewport', {
44             layout:'border',
45             items:[{
46                 region:'west',
47                 id:'west-panel',
48                 title:'West',
49                 split:true,
50                 width: 200,
51                 minSize: 175,
52                 maxSize: 400,
53                 collapsible: true,
54                 margins:'35 0 5 5',
55                 cmargins:'35 5 5 5',
56                 layout:'accordion',
57                 layoutConfig:{
58                     animate:true
59                 },
60                 items: [{
61                     html: Ext.example.shortBogusMarkup,
62                     title:'Navigation',
63                     autoScroll:true,
64                     border:false,
65                     iconCls:'nav'
66                 },{
67                     title:'Settings',
68                     html: Ext.example.shortBogusMarkup,
69                     border:false,
70                     autoScroll:true,
71                     iconCls:'settings'
72                 }]
73             },{
74                 region:'center',
75                 margins:'35 5 5 0',
76                 layout:'column',
77                 autoScroll:true,
78                 defaults: {
79                     layout: 'anchor',
80                     defaults: {
81                         anchor: '100%'
82                     }
83                 },
84                 items: [{
85                     columnWidth: 1/3,
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: 1/3,
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: 1/3,
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 </body>
119 </html>