examples/layout-browser/layouts/basic.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 //\r
  10 // Note that these are all defined as panel configs, rather than instantiated \r
  11 // as panel objects.  You could just as easily do this instead:\r
  12 //\r
  13 // var absolute = new Ext.Panel({ ... });\r
  14 //\r
  15 // However, by passing configs into the main container instead of objects, we can defer \r
  16 // layout AND object instantiation until absolutely needed.  Since most of these panels\r
  17 // won't be shown by default until requested, this will save us some processing \r
  18 // time up front when initially rendering the page.\r
  19 //\r
  20 // Since all of these configs are being added into a layout container, they are\r
  21 // automatically assumed to be panel configs, and so the xtype of 'panel' is\r
  22 // implicit.  To define a config of some other type of component to be added into\r
  23 // the layout, simply provide the appropriate xtype config explicitly.\r
  24 //\r
  25 /*\r
  26  * ================  Start page config  =======================\r
  27  */\r
  28 // The default start page, also a simple example of a FitLayout.\r
  29 var start = {\r
  30         id: 'start-panel',\r
  31         title: 'Start Page',\r
  32         layout: 'fit',\r
  33         bodyStyle: 'padding:25px',\r
  34         contentEl: 'start-div'  // pull existing content from the page\r
  35 };\r
  36 \r
  37 /*\r
  38  * ================  AnbsoluteLayout config  =======================\r
  39  */\r
  40 var absolute = {\r
  41         id: 'absolute-panel',\r
  42         title: 'Absolute Layout',\r
  43         layout: 'absolute',\r
  44         defaults: {\r
  45                 bodyStyle: 'padding:15px;',\r
  46                 width: 200,\r
  47                 height: 100,\r
  48                 frame: true\r
  49         },\r
  50         items:[{\r
  51                 title: 'Panel 1',\r
  52                 x: 50,\r
  53                 y: 50,\r
  54                 html: 'Positioned at x:50, y:50'\r
  55         },{\r
  56                 title: 'Panel 2',\r
  57                 x: 125,\r
  58                 y: 125,\r
  59                 html: 'Positioned at x:125, y:125'\r
  60         }]\r
  61 };\r
  62 \r
  63 /*\r
  64  * ================  AccordionLayout config  =======================\r
  65  */\r
  66 var accordion = {\r
  67     id:'accordion-panel',\r
  68         title: 'Accordion Layout',\r
  69     layout:'accordion',\r
  70     bodyBorder: false,  // useful for accordion containers since the inner panels have borders already\r
  71     bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout\r
  72         defaults: {bodyStyle: 'padding:15px'},\r
  73     items: [{\r
  74         title: 'Introduction',\r
  75                 tools: [{id:'gear'},{id:'refresh'}],\r
  76                 html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'\r
  77     },{\r
  78         title: 'Basic Content',\r
  79                 html: '<br /><p>More content.  Open the third panel for a customized look and feel example.</p>',\r
  80                 items: {\r
  81                         xtype: 'button',\r
  82                         text: 'Show Next Panel',\r
  83                         handler: function(){\r
  84                                 Ext.getCmp('acc-custom').expand(true);\r
  85                         }\r
  86                 }\r
  87     },{\r
  88                 id: 'acc-custom',\r
  89         title: 'Custom Panel Look and Feel',\r
  90                 cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class\r
  91                 html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'\r
  92     }]\r
  93 };\r
  94 \r
  95 /*\r
  96  * ================  AnchorLayout config  =======================\r
  97  */\r
  98 var anchor = {\r
  99         id:'anchor-panel',\r
 100         title: 'Anchor Layout',\r
 101     layout:'anchor',\r
 102         defaults: {bodyStyle: 'padding:15px'},\r
 103     items: [{\r
 104         title: 'Panel 1',\r
 105         height: 100,\r
 106                 anchor: '50%',\r
 107                 html: '<p>Width = 50% of the container</p>'\r
 108     },{\r
 109         title: 'Panel 2',\r
 110         height: 100,\r
 111                 anchor: '-100',\r
 112                 html: '<p>Width = container width - 100 pixels</p>'\r
 113     },{\r
 114         title: 'Panel 3',\r
 115                 anchor: '-10, -262',\r
 116                 html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'\r
 117     }]\r
 118 };\r
 119 \r
 120 /*\r
 121  * ================  BorderLayout config  =======================\r
 122  */\r
 123 var border = {\r
 124         id:'border-panel',\r
 125         title: 'Border Layout',\r
 126     layout:'border',\r
 127     bodyBorder: false,\r
 128         defaults: {\r
 129                 collapsible: true,\r
 130         split: true,\r
 131                 animFloat: false,\r
 132                 autoHide: false,\r
 133                 useSplitTips: true,\r
 134                 bodyStyle: 'padding:15px'\r
 135         },\r
 136     items: [{\r
 137         title: 'Footer',\r
 138                 region: 'south',\r
 139         height: 150,\r
 140         minSize: 75,\r
 141         maxSize: 250,\r
 142                 cmargins: '5 0 0 0',\r
 143                 html: '<p>Footer content</p>'\r
 144     },{\r
 145                 title: 'Navigation',\r
 146         region:'west',\r
 147                 floatable: false,\r
 148                 margins: '5 0 0 0',\r
 149                 cmargins: '5 5 0 0',\r
 150         width: 175,\r
 151         minSize: 100,\r
 152         maxSize: 250,\r
 153                 html: '<p>Secondary content like navigation links could go here</p>'\r
 154         },{\r
 155                 title: 'Main Content',\r
 156                 collapsible: false,\r
 157         region:'center',\r
 158                 margins: '5 0 0 0',\r
 159                 html: '<h1>Main Page</h1><p>This is where the main content would go</p>'\r
 160         }]\r
 161 };\r
 162 \r
 163 /*\r
 164  * ================  CardLayout config (TabPanel)  =======================\r
 165  */\r
 166 // Note that the TabPanel component uses an internal CardLayout -- it's not\r
 167 // something you have to explicitly configure.  However, it's still a perfect\r
 168 // example of how this layout style can be used in a complex component.\r
 169 var cardTabs = {\r
 170         xtype: 'tabpanel',\r
 171         id: 'card-tabs-panel',\r
 172         plain: true,  //remove the header border\r
 173         activeItem: 0,\r
 174         defaults: {bodyStyle: 'padding:15px'},\r
 175         items:[{\r
 176                 title: 'Tab 1',\r
 177                 html: 'This is tab 1 content.'\r
 178         },{\r
 179                 title: 'Tab 2',\r
 180                 html: 'This is tab 2 content.'\r
 181         },{\r
 182                 title: 'Tab 3',\r
 183                 html: 'This is tab 3 content.'\r
 184         }]\r
 185 };\r
 186 \r
 187 // This is a fake CardLayout navigation function.  A real implementation would\r
 188 // likely be more sophisticated, with logic to validate navigation flow.  It will\r
 189 // be assigned next as the handling function for the buttons in the CardLayout example.\r
 190 var cardNav = function(incr){\r
 191         var l = Ext.getCmp('card-wizard-panel').getLayout();\r
 192         var i = l.activeItem.id.split('card-')[1];\r
 193         var next = parseInt(i) + incr;\r
 194         l.setActiveItem(next);\r
 195         Ext.getCmp('card-prev').setDisabled(next==0);\r
 196         Ext.getCmp('card-next').setDisabled(next==2);\r
 197 };\r
 198 \r
 199 /*\r
 200  * ================  CardLayout config (Wizard)  =======================\r
 201  */\r
 202 var cardWizard = {\r
 203         id:'card-wizard-panel',\r
 204         title: 'Card Layout (Wizard)',\r
 205     layout:'card',\r
 206         activeItem: 0,\r
 207         bodyStyle: 'padding:15px',\r
 208         defaults: {border:false},\r
 209         bbar: ['->', {\r
 210                 id: 'card-prev',\r
 211                 text: '&laquo; Previous', \r
 212                 handler: cardNav.createDelegate(this, [-1]),\r
 213                 disabled: true\r
 214         },{\r
 215                 id: 'card-next',\r
 216                 text: 'Next &raquo;', \r
 217                 handler: cardNav.createDelegate(this, [1])\r
 218         }],\r
 219         items: [{\r
 220                 id: 'card-0',\r
 221                 html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'\r
 222     },{\r
 223                 id: 'card-1',\r
 224                 html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'\r
 225     },{\r
 226                 id: 'card-2',\r
 227                 html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'\r
 228     }]\r
 229 };\r
 230 \r
 231 /*\r
 232  * ================  ColumnLayout config  =======================\r
 233  */\r
 234 var column = {\r
 235         id:'column-panel',\r
 236         title: 'Column Layout',\r
 237     layout:'column',\r
 238     bodyStyle:'padding:5px',\r
 239         defaults: {bodyStyle:'padding:15px'},\r
 240     items: [{\r
 241         title: 'Width = .25',\r
 242                 columnWidth: .25,\r
 243                 html: '<p>This is some short content.</p>'\r
 244     },{\r
 245         title: 'Width = .75',\r
 246                 columnWidth: .75,\r
 247                 html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'\r
 248     },{\r
 249         title: 'Width = 250px',\r
 250                 width: 250,\r
 251                 html: 'Not much here!'\r
 252         }]\r
 253 };\r
 254 \r
 255 /*\r
 256  * ================  FitLayout config  =======================\r
 257  */\r
 258 var fit = {\r
 259         id:'fit-panel',\r
 260         title: 'Fit Layout',\r
 261     layout:'fit',\r
 262     items: {\r
 263                 title: 'Inner Panel',\r
 264                 html: '<p>This panel is fit within its container.</p>',\r
 265                 bodyStyle: 'margin:15px',\r
 266                 border: false\r
 267     }\r
 268 };\r
 269 \r
 270 /*\r
 271  * ================  FormLayout config  =======================\r
 272  */\r
 273 // NOTE: While you can create a basic Panel with layout:'form', practically\r
 274 // you should usually use a FormPanel to also get its form-specific functionality.\r
 275 // Note that the layout config is not required on FormPanels.\r
 276 var form = {\r
 277         xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it\r
 278         id: 'form-panel',\r
 279     labelWidth: 75,\r
 280     title: 'Form Layout',\r
 281     bodyStyle:'padding:15px',\r
 282     width: 350,\r
 283         labelPad: 20,\r
 284         layoutConfig: {\r
 285                 labelSeparator: ''\r
 286         },\r
 287     defaults: {\r
 288                 width: 230,\r
 289                 msgTarget: 'side'\r
 290         },\r
 291     defaultType: 'textfield',\r
 292     items: [{\r
 293             fieldLabel: 'First Name',\r
 294             name: 'first',\r
 295             allowBlank:false\r
 296         },{\r
 297             fieldLabel: 'Last Name',\r
 298             name: 'last'\r
 299         },{\r
 300             fieldLabel: 'Company',\r
 301             name: 'company'\r
 302         },{\r
 303             fieldLabel: 'Email',\r
 304             name: 'email',\r
 305             vtype:'email'\r
 306         }\r
 307     ],\r
 308     buttons: [{text: 'Save'},{text: 'Cancel'}]\r
 309 };\r
 310 \r
 311 /*\r
 312  * ================  TableLayout config  =======================\r
 313  */\r
 314 var table = {\r
 315         id:'table-panel',\r
 316         title: 'Table Layout',\r
 317     layout:'table',\r
 318         layoutConfig: {\r
 319                 columns: 4\r
 320         },\r
 321         defaults: {\r
 322                 bodyStyle:'padding:15px 20px'\r
 323         },\r
 324     items: [{\r
 325         title: 'Lots of Spanning',\r
 326                 html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
 327                 rowspan: 3\r
 328     },{\r
 329         title: 'Basic Table Cell',\r
 330                 html: '<p>Basic panel in a table cell.</p>',\r
 331                 cellId: 'basic-cell',\r
 332                 cellCls: 'custom-cls'\r
 333     },{\r
 334                 html: '<p>Plain panel</p>'\r
 335         },{\r
 336         title: 'Another Cell',\r
 337                 html: '<p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p><br /><p>Row spanning.</p>',\r
 338                 width: 300,\r
 339                 rowspan: 2\r
 340     },{\r
 341                 html: 'Plain cell spanning two columns',\r
 342                 colspan: 2\r
 343     },{\r
 344                 title: 'More Column Spanning',\r
 345                 html: '<p>Spanning three columns.</p>',\r
 346                 colspan: 3\r
 347         },{\r
 348                 title: 'Spanning All Columns',\r
 349                 html: '<p>Spanning all columns.</p>',\r
 350                 colspan: 4\r
 351         }]\r
 352 };\r