examples/layout-browser/layouts/basic.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.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     activeTab: 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, 10) + 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 = {
 357     id: 'vbox-panel',
 358     title: 'vBox Layout',
 359     layout: {
 360         type: 'vbox',
 361         pack: 'start',
 362         align: 'stretch'
 363     },
 364     defaults: {
 365         frame: true
 366     },
 367     items: [{
 368         title: 'Panel 1',
 369         flex: 1,
 370         html: 'flex : 1'
 371     }, {
 372         title: 'Panel 2',
 373         height: 100,
 374         html: 'height: 100'
 375     }, {
 376         title: 'Panel 3',
 377         flex: 2,
 378         html: 'flex : 2'
 379     }]
 380 };
 381
 382 /*
 383  * ================  HBoxLayout config  =======================
 384  */
 385 var hbox = {
 386     id: 'hbox-panel',
 387     title: 'hBox Layout',
 388     layout: {
 389         type: 'hbox',
 390         pack: 'start',
 391         align: 'stretch'
 392     },
 393     defaults: {
 394         frame: true
 395     },
 396     items: [{
 397         title: 'Panel 1',
 398         flex: 1,
 399         html: 'flex : 1'
 400     }, {
 401         title: 'Panel 2',
 402         width: 100,
 403         html: 'width : 100'
 404     }, {
 405         title: 'Panel 3',
 406         flex: 2,
 407         html: 'flex : 2'
 408     }]
 409 };