docs/guides/components/examples/lazy_instantiation/app.js

   1 /**
   2  * @example Lazy Instantiation
   3  *
   4  * A basic example demonstrating how a Container contains other items using the items config.
   5  */
   6 Ext.require('Ext.tab.Panel');
   7 Ext.require('Ext.window.MessageBox');
   8
   9 Ext.onReady(function() {
  10
  11     Ext.create('Ext.tab.Panel', {
  12         renderTo: Ext.getBody(),
  13         height: 100,
  14         width: 200,
  15         items: [
  16             {
  17                 // Explicitly define the xtype of this Component configuration.
  18                 // This tells the Container (the tab panel in this case)
  19                 // to instantiate a Ext.panel.Panel when it deems necessary
  20                 xtype: 'panel',
  21                 title: 'Tab One',
  22                 html: 'The first tab',
  23                 listeners: {
  24                     render: function() {
  25                         Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
  26                     }
  27                 }
  28             },
  29             {
  30                 // this component configuration does not have an xtype since 'panel' is the default
  31                 // xtype for all Component configurations in a Container
  32                 title: 'Tab Two',
  33                 html: 'The second tab',
  34                 listeners: {
  35                     render: function() {
  36                         Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
  37                     }
  38                 }
  39             }
  40         ]
  41     });
  42 });