examples/layout-browser/layouts/basic.js

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