examples/layout-browser/layout-browser.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5     <title>ExtJS Layout Examples</title>
   6     <!-- Ext -->
   7     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   8     <script type="text/javascript" src="../../bootstrap.js"></script>
   9
  10     <!-- example code -->
  11
  12     <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />
  13     <link rel="stylesheet" type="text/css" href="layout-browser.css">
  14
  15     <!-- page specific -->
  16     <script type="text/javascript" src="layouts/basic.js"></script>
  17     <script type="text/javascript" src="layouts/custom.js"></script>
  18     <script type="text/javascript" src="layouts/combination.js"></script>
  19     <script type="text/javascript" src="layout-browser.js"></script>
  20
  21 </head>
  22 <body>
  23     <div style="display:none;">
  24
  25         <!-- Start page content -->
  26         <div id="start-div">
  27             <div style="float:left;" ><img src="images/layout-icon.gif" /></div>
  28             <div style="margin-left:100px;">
  29                 <h2>Welcome!</h2>
  30                 <p>There are many sample layouts to choose from that should give you a good head start in building your own
  31                 application layout.  Just like the combination examples, you can mix and match most layouts as
  32                 needed, so don't be afraid to experiment!</p>
  33                 <p>Select a layout from the tree to the left to begin.</p>
  34             </div>
  35         </div>
  36
  37         <!-- Basic layouts -->
  38         <div id="absolute-details">
  39             <h2>Ext.layout.container.Absolute</h2>
  40             <p>This is a simple layout style that allows you to position items within a container using
  41             CSS-style absolute positioning via XY coordinates.</p>
  42             <p><b>Sample Config:</b></p>
  43             <pre><code>
  44 layout: 'absolute',
  45 items:[{
  46     title: 'Panel 1',
  47     x: 50,
  48     y: 50,
  49     html: 'Positioned at x:50, y:50'
  50 }]
  51             </code></pre>
  52             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Absolute" target="_blank">API Reference</a></p>
  53         </div>
  54         <div id="accordion-details">
  55             <h2>Ext.layout.container.Accordion</h2>
  56             <p>Displays one panel at a time in a stacked layout.  No special config properties are required other
  57             than the layout &mdash; all panels added to the container will be converted to accordion panels.</p>
  58             <p><b>Sample Config:</b></p>
  59             <pre><code>
  60 layout: 'accordion',
  61 items:[{
  62     title: 'Panel 1',
  63     html: 'Content'
  64 },{
  65     title: 'Panel 2',
  66     id: 'panel2',
  67     html: 'Content'
  68 }]
  69             </code></pre>
  70             <p>You can easily customize individual accordion panels by adding styles scoped to the panel by class or id.
  71             For example, to style the panel with id 'panel2' above you could add rules like this:</p>
  72             <pre><code>
  73 #panel2 .x-panel-body {
  74     background:#ffe;
  75     color:#15428B;
  76 }
  77 #panel2 .x-panel-header-text {
  78     color:#555;
  79 }
  80             </code></pre>
  81             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Accordion" target="_blank">API Reference</a></p>
  82         </div>
  83         <div id="anchor-details">
  84             <h2>Ext.layout.container.Anchor</h2>
  85             <p>Provides anchoring of contained items to the container's edges.  This type of layout is most commonly
  86             seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the
  87             container without hard-coding their dimensions.</p>
  88             <p>In this example, panels are anchored for example purposes so that you can easily see the effect.
  89             If you resize the browser window, the anchored panels will automatically resize to maintain the
  90             same relative dimensions.</p>
  91             <p><b>Sample Config:</b></p>
  92             <pre><code>
  93 layout: 'anchor',
  94 items: [{
  95     title: 'Panel 1',
  96     height: 100,
  97     anchor: '50%'
  98 },{
  99     title: 'Panel 2',
 100     height: 100,
 101     anchor: '-100'
 102 },{
 103     title: 'Panel 3',
 104     anchor: '-10, -262'
 105 }]
 106             </code></pre>
 107             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Anchor" target="_blank">API Reference</a></p>
 108         </div>
 109         <div id="border-details">
 110             <h2>Ext.layout.container.Border</h2>
 111             <p>This Layout Browser page is already a border layout, and this example shows a separate border layout
 112             nested within a region of the page's border layout.  Border layouts can be nested with just about any
 113             level of complexity that you might need.</p>
 114             <p>Every border layout <b>must</b> at least have a center region.  All other regions are optional.</p>
 115             <p><b>Sample Config:</b></p>
 116             <pre><code>
 117 layout:'border',
 118 defaults: {
 119     collapsible: true,
 120     split: true,
 121     bodyStyle: 'padding:15px'
 122 },
 123 items: [{
 124     title: 'Footer',
 125     region: 'south',
 126     height: 150,
 127     minSize: 75,
 128     maxSize: 250,
 129     cmargins: '5 0 0 0'
 130 },{
 131     title: 'Navigation',
 132     region:'west',
 133     margins: '5 0 0 0',
 134     cmargins: '5 5 0 0',
 135     width: 175,
 136     minSize: 100,
 137     maxSize: 250
 138 },{
 139     title: 'Main Content',
 140     collapsible: false,
 141     region:'center',
 142     margins: '5 0 0 0'
 143 }]
 144             </code></pre>
 145             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border" target="_blank">API Reference</a></p>
 146         </div>
 147         <div id="card-tabs-details">
 148             <h2>Ext.layout.container.Card (TabPanel)</h2>
 149             <p>The TabPanel component is an excellent example of a sophisticated card layout.  Each tab is just
 150             a panel managed by the card layout such that only one is visible at a time.  In this case, configuration
 151             is simple since we aren't actually building a card layout from scratch.  Don't forget to set the
 152             activeItem config in order to default to the tab that should display first.</p>
 153             <p><b>Sample Config:</b></p>
 154             <pre><code>
 155 xtype: 'tabpanel',
 156 activeTab: 0, // index or id
 157 items:[{
 158     title: 'Tab 1',
 159     html: 'This is tab 1 content.'
 160 },{
 161     title: 'Tab 2',
 162     html: 'This is tab 2 content.'
 163 },{
 164     title: 'Tab 3',
 165     html: 'This is tab 3 content.'
 166 }]
 167             </code></pre>
 168             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">Card layout API Reference</a></p>
 169             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.tab.Panel" target="_blank">TabPanel API Reference</a></p>
 170         </div>
 171         <div id="card-wizard-details">
 172             <h2>Ext.layout.container.Card (Wizard)</h2>
 173             <p>You can use a Card layout to create your own custom wizard-style screen.  The layout is a standard
 174             CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function
 175             that implements the wizard's business logic (see the code in basic.js for details).</p>
 176             <p><b>Sample Config:</b></p>
 177             <pre><code>
 178 layout:'card',
 179 activeItem: 0, // index or id
 180 bbar: ['->', {
 181     id: 'card-prev',
 182     text: '&amp;laquo; Previous'
 183 },{
 184     id: 'card-next',
 185     text: 'Next &amp;raquo;'
 186 }],
 187 items: [{
 188     id: 'card-0',
 189     html: 'Step 1'
 190 },{
 191     id: 'card-1',
 192     html: 'Step 2'
 193 },{
 194     id: 'card-2',
 195     html: 'Step 3'
 196 }]
 197             </code></pre>
 198             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card" target="_blank">API Reference</a></p>
 199         </div>
 200         <div id="column-details">
 201             <h2>Ext.layout.container.Column</h2>
 202             <p>This is a useful layout style when you need multiple columns that can have varying content height.
 203             Any fixed-width column widths are calculated first, then any percentage-width columns specified using
 204             the <tt>columnWidth</tt> config will be calculated based on remaining container width.  Percentages
 205             should add up to 1 (100%) in order to fill the container.</p>
 206             <p><b>Sample Config:</b></p>
 207             <pre><code>
 208 layout:'column',
 209 items: [{
 210     title: 'Width = 25%',
 211     columnWidth: .25,
 212     html: 'Content'
 213 },{
 214     title: 'Width = 75%',
 215     columnWidth: .75,
 216     html: 'Content'
 217 },{
 218     title: 'Width = 250px',
 219     width: 250,
 220     html: 'Content'
 221 }]
 222             </code></pre>
 223             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Column" target="_blank">API Reference</a></p>
 224         </div>
 225         <div id="fit-details">
 226             <h2>Ext.layout.container.Fit</h2>
 227             <p>A very simple layout that simply fills the container with a single panel.  This is usually the best default
 228             layout choice when you have no other specific layout requirements.</p>
 229             <p><b>Sample Config:</b></p>
 230             <pre><code>
 231 layout:'fit',
 232 items: {
 233     title: 'Fit Panel',
 234     html: 'Content',
 235     border: false
 236 }
 237             </code></pre>
 238             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Fit" target="_blank">API Reference</a></p>
 239         </div>
 240         <div id="table-details">
 241             <h2>Ext.layout.container.Table</h2>
 242             <p>Outputs a standard HTML table as the layout container.  This is sometimes useful for complex layouts
 243             where cell spanning is required, or when you want to allow the contents to flow naturally based on standard
 244             browser table layout rules.</p>
 245             <p><b>Sample Config:</b></p>
 246             <pre><code>
 247 layout: {
 248     type: 'table',
 249     columns: 4
 250 },
 251 items: [
 252     {html:'1,1',rowspan:3},
 253     {html:'1,2'},
 254     {html:'1,3'},
 255     {html:'2,2',colspan:2},
 256     {html:'3,2'},
 257     {html:'3,3'}
 258 ]
 259             </code></pre>
 260             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Table" target="_blank">API Reference</a></p>
 261         </div>
 262
 263         <div id="vbox-details">
 264             <h2>Ext.layout.container.VBox</h2>
 265             <p>A layout that allows for the vertical and horizontal stretching of child items, much like the container
 266             layout with size management.</p>
 267             <p><b>Sample Config:</b></p>
 268             <pre><code>
 269 layout: {
 270     type: 'vbox'
 271     align : 'stretch',
 272     pack  : 'start',
 273 },
 274 items: [
 275     {html:'panel 1', flex:1},
 276     {html:'panel 2', height:150},
 277     {html:'panel 3', flex:2}
 278 ]
 279             </code></pre>
 280             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.VBox" target="_blank">API Reference</a></p>
 281         </div>
 282
 283         <div id="hbox-details">
 284             <h2>Ext.layout.container.HBox</h2>
 285             <p>A layout that allows for the vertical and horizontal stretching of child items, much like the column
 286             layout but can stretch items vertically.</p>
 287             <p><b>Sample Config:</b></p>
 288             <pre><code>
 289 layout: {
 290     type: 'hbox',
 291     pack: 'start',
 292     align: 'stretch'
 293 },
 294 items: [
 295     {html:'panel 1', flex:1},
 296     {html:'panel 2', width:150},
 297     {html:'panel 3', flex:2}
 298 ]
 299             </code></pre>
 300             <p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.HBox" target="_blank">API Reference</a></p>
 301         </div>
 302
 303
 304         <!-- Custom layouts -->
 305         <div id="center-details">
 306             <h2>Ext.ux.layout.Center</h2>
 307             <p>This is a custom layout for centering contents within a container.  The only requirement is
 308             that the container have a single child panel with a fixed width or a percentage ratio specified.
 309             The child panel can then contain  any content, including other components, that will display
 310             centered within the main container. To make the centered panel non-visual, remove the title
 311             and add <tt>border:false</tt> to the child config.</p>
 312             <p><b>Sample Config:</b></p>
 313             <pre><code>
 314 layout:'ux.center',
 315 items: {
 316     title: 'Centered Panel',
 317     widthRatio: 0.75,
 318     html: 'Some content'
 319 }
 320             </code></pre>
 321         </div>
 322
 323
 324         <!-- Combination layouts -->
 325         <div id="tabs-nested-layouts-details">
 326             <h2>Tabs With Nested Layouts</h2>
 327             <p>There are multiple levels of layout nesting within three different TabPanels in this example.
 328             Each tab in a TabPanel can have its own separate layout.  As we can see, some have plain content,
 329             while others contain full BorderLayouts.  There is also a fully-loaded grid nested down inside
 330             the inner-most tab, showing that there is no limit to how complex your layout can be.</p>
 331             <p>One of the trickiest aspects of deeply nested layouts is dealing with borders on all the
 332             different panels used in the layout.  In this example, body padding and region margins are used
 333             extensively to provide space between components so that borders can be displayed naturally in
 334             most cases. A different approach would be to minimize padding and use the config properties
 335             related to borders to turn borders on and off selectively to achieve a slightly different look
 336             and feel.</p>
 337         </div>
 338         <div id="complex-details">
 339             <h2>Complex Layout</h2>
 340             <p></p>
 341         </div>
 342
 343         <!-- Form layouts -->
 344         <div id="abs-form-details">
 345             <h2>Absolute Layout Form</h2>
 346             <p>FormLayout supports absolute positioning in addition to standard anchoring for flexible control over
 347             positioning of fields and labels in containers.  In this example, the top and left positions of the labels
 348             and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.</p>
 349         </div>
 350     </div>
 351 </body>
 352 </html>