docs/source/basic.html

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