examples/layout-browser/layout-browser.html

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