examples/layout-browser/layouts/basic.js

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