examples/layout-browser/layout-browser.html

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