make sure the README will appear on github
[extjs.git] / examples / layout / column.html
1 <html>\r
2 <head>\r
3   <title>Column Layout</title>\r
4         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
5 \r
6     <!-- GC -->\r
7         <!-- LIBS -->\r
8         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
9         <!-- ENDLIBS -->\r
10 \r
11     <script type="text/javascript" src="../../ext-all.js"></script>\r
12 \r
13     <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->\r
14         <style type="text/css">\r
15         html, body {\r
16         font:normal 12px verdana;\r
17         margin:0;\r
18         padding:0;\r
19         border:0 none;\r
20         overflow:hidden;\r
21         height:100%;\r
22     }\r
23         .x-panel-body p {\r
24             margin:5px;\r
25         }\r
26     .x-column-layout-ct .x-panel {\r
27         margin-bottom:5px;\r
28     }\r
29     .x-column-layout-ct .x-panel-dd-spacer {\r
30         margin-bottom:5px;\r
31     }\r
32     .settings {\r
33         background-image:url(../shared/icons/fam/folder_wrench.png) !important;\r
34     }\r
35     .nav {\r
36         background-image:url(../shared/icons/fam/folder_go.png) !important;\r
37     }\r
38     </style>\r
39         <script type="text/javascript">\r
40 \r
41     Ext.onReady(function(){\r
42 \r
43        // NOTE: This is an example showing simple state management. During development,\r
44        // it is generally best to disable state management as dynamically-generated ids\r
45        // can change across page loads, leading to unpredictable results.  The developer\r
46        // should ensure that stable state ids are set for stateful components in real apps.\r
47        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
48 \r
49        var viewport = new Ext.Viewport({\r
50             layout:'border',\r
51             items:[{\r
52                 region:'west',\r
53                 id:'west-panel',\r
54                 title:'West',\r
55                 split:true,\r
56                 width: 200,\r
57                 minSize: 175,\r
58                 maxSize: 400,\r
59                 collapsible: true,\r
60                 margins:'35 0 5 5',\r
61                 cmargins:'35 5 5 5',\r
62                 layout:'accordion',\r
63                 layoutConfig:{\r
64                     animate:true\r
65                 },\r
66                 items: [{\r
67                     html: Ext.example.shortBogusMarkup,\r
68                     title:'Navigation',\r
69                     autoScroll:true,\r
70                     border:false,\r
71                     iconCls:'nav'\r
72                 },{\r
73                     title:'Settings',\r
74                     html: Ext.example.shortBogusMarkup,\r
75                     border:false,\r
76                     autoScroll:true,\r
77                     iconCls:'settings'\r
78                 }]\r
79             },{\r
80                 region:'center',\r
81                 margins:'35 5 5 0',\r
82                 layout:'column',\r
83                 autoScroll:true,\r
84                 items:[{\r
85                     columnWidth:.33,\r
86                     baseCls:'x-plain',\r
87                     bodyStyle:'padding:5px 0 5px 5px',\r
88                     items:[{\r
89                         title: 'A Panel',\r
90                         html: Ext.example.shortBogusMarkup\r
91                     }]\r
92                 },{\r
93                     columnWidth:.33, \r
94                     baseCls:'x-plain',\r
95                     bodyStyle:'padding:5px 0 5px 5px',\r
96                     items:[{\r
97                         title: 'A Panel',\r
98                         html: Ext.example.shortBogusMarkup\r
99                     }]\r
100                 },{\r
101                     columnWidth:.33,\r
102                     baseCls:'x-plain',\r
103                     bodyStyle:'padding:5px',\r
104                     items:[{\r
105                         title: 'A Panel',\r
106                         html: Ext.example.shortBogusMarkup\r
107                     },{\r
108                         title: 'Another Panel',\r
109                         html: Ext.example.shortBogusMarkup\r
110                     }]\r
111                 }]\r
112             }]\r
113         });\r
114     });\r
115         </script>\r
116 </head>\r
117 <body>\r
118 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
119   </body>\r
120 </html>