/ext-4.0.7/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 */
 6Ext.require('Ext.tab.Panel');
 7Ext.require('Ext.window.MessageBox');
 8
 9Ext.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});