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>