X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/guides/components/examples/lazy_instantiation/app.js

diff --git a/docs/guides/components/examples/lazy_instantiation/app.js b/docs/guides/components/examples/lazy_instantiation/app.js
new file mode 100644
index 00000000..1dcefad3
--- /dev/null
+++ b/docs/guides/components/examples/lazy_instantiation/app.js
@@ -0,0 +1,42 @@
+/**
+ * @example Lazy Instantiation
+ *
+ * A basic example demonstrating how a Container contains other items using the items config.
+ */
+Ext.require('Ext.tab.Panel');
+Ext.require('Ext.window.MessageBox');
+
+Ext.onReady(function() {
+
+    Ext.create('Ext.tab.Panel', {
+        renderTo: Ext.getBody(),
+        height: 100,
+        width: 200,
+        items: [
+            {
+                // Explicitly define the xtype of this Component configuration.
+                // This tells the Container (the tab panel in this case)
+                // to instantiate a Ext.panel.Panel when it deems necessary
+                xtype: 'panel',
+                title: 'Tab One',
+                html: 'The first tab',
+                listeners: {
+                    render: function() {
+                        Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
+                    }
+                }
+            },
+            {
+                // this component configuration does not have an xtype since 'panel' is the default 
+                // xtype for all Component configurations in a Container
+                title: 'Tab Two',
+                html: 'The second tab',
+                listeners: {
+                    render: function() {
+                        Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
+                    }
+                }
+            }
+        ]
+    });
+});