examples/layout-browser/layouts/basic.js

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