/ext-4.0.7/docs/guides/components/examples/lazy_instantiation/app.js
JavaScript | 42 lines | 30 code | 2 blank | 10 comment | 0 complexity | 72ed10a7be75a75baba56d1e9dc78f1d MD5 | raw file
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});