examples/dialog/hello.html

diff --git a/examples/dialog/hello.html b/examples/dialog/hello.html
index ff48f86..34c1b95 100644 (file)
--- a/examples/dialog/hello.html
+++ b/examples/dialog/hello.html
@@ -22,18 +22,106 @@
 <p>Note that the js is not minified so it is readable. See 
 <button type="button" onclick="RooDocs.viewSource.show('/hello.js')">hello.js</button>for the full source code.</p>\r
 Here's snapshot of the code that creates the dialog:\r
-<pre class="code"><code>dialog = new Roo.BasicDialog("hello-dlg", {\r
-        modal:true,\r
-        autoTabs:true,\r
-        width:500,\r
-        height:300,\r
-        shadow:true,\r
-        minWidth:300,\r
-        minHeight:300\r
+<pre class="code"><code>Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
+
+
+
+var HelloWorld = {
+
+    dialog : false,
+    callback:  false,
+
+    show : function(data, cb)
+    {
+        // standard code example..
+        if (!this.dialog) {
+            this.create();
+        }
+
+        this.callback = cb;
+        this.data = data;
+        this.dialog.show(data._el ? data._el : false);
+        if (this.form) {
+           this.form.reset();
+           this.form.setValues(data);
+           this.form.fireEvent('actioncomplete', this.form,  { type: 'setdata', data: data });
+        }
+
+    },
+
+    create : function()
+    {
+        var _this = this;
+        this.dialog = Roo.factory({
+            xns : Roo,
+            xtype : 'LayoutDialog',
+            autoTabs:true,
+            width:500,
+            height:300,
+            shadow:true,
+            minWidth:300,
+            minHeight:250,
+            proxyDrag: true,
+            listeners : {
+                show : function() {
+                    var p = this.layout.getRegion('center').getPanel(0);
+                    p.setContent("Hello World");
+                    
+                },
+                keydown : function(dlg, e) {
+                    var k = e.getKey(); 
+                    if(k == 27){ _this.dialog.hide(); }  
+                }
+            },
+            center : {
+                xtype: 'LayoutRegion',
+                xns: Roo
+            },
+            items : [
+                {
+                    xtype: 'ContentPanel',
+                    xns: Roo,
+                    region : "center"
+                    
+                }
+            ],
+            buttons : [
+                {
+                    xtype : 'Button',
+                    xns : Roo,
+                    text : 'Submit',
+                    listeners : {
+                        click : function () {
+                            _this.dialog.hide()
+                        }   
+                    }
+                },
+                {
+                    xtype : 'Button',
+                    xns : Roo,
+                    text : 'Close',
+                    listeners : {
+                        click : function () {
+                            _this.dialog.hide()
+                        }   
+                    }
+                }
+            ]
+            
+        });
+            
+    }
+};                
+ 
+
+// using onDocumentReady instead of window.onload initializes the application
+// when the DOM is ready, without waiting for images and other resources to load
+Roo.onReady(function() {
+    
+    Roo.get('show-dialog-btn').on('click',function () {
+        HelloWorld.show({ _el : this});
+    });
 });\r
-dialog.addKeyListener(27, dialog.hide, dialog);\r
-dialog.addButton('Close', dialog.hide, dialog);\r
-dialog.addButton('Submit', dialog.hide, dialog).disable();\r
 </code></pre>\r
 \r
     <!-- The dialog is created from existing markup.\r