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>