Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / direct / direct.js

diff --git a/examples/direct/direct.js b/examples/direct/direct.js
index f3f77b4..0407fb9 100644 (file)
--- a/examples/direct/direct.js
+++ b/examples/direct/direct.js
@@ -1,88 +1,109 @@
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){\r
-    Ext.Direct.addProvider(\r
-        Ext.app.REMOTING_API,\r
-        {\r
-            type:'polling',\r
-            url: 'php/poll.php'\r
-        }\r
-    );\r
-\r
-    var out = new Ext.form.DisplayField({\r
-        cls: 'x-form-text',\r
-        id: 'out'\r
-    });\r
-\r
-    var text = new Ext.form.TextField({\r
-        width: 300,\r
-        emptyText: 'Echo input'\r
-    });\r
-\r
-    var call = new Ext.Button({\r
-        text: 'Echo',\r
-        handler: function(){\r
-            TestAction.doEcho(text.getValue(), function(result, e){\r
-                var t = e.getTransaction();\r
-                out.append(String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',\r
-                       t.action, t.method, Ext.encode(result)));\r
-                out.el.scroll('b', 100000, true);\r
-            });\r
-        }\r
-    });\r
-\r
-    var num = new Ext.form.TextField({\r
-        width: 80,\r
-        emptyText: 'Multiply x 8',\r
-        style:  'text-align:left;'\r
-    });\r
-\r
-    var multiply = new Ext.Button({\r
-        text: 'Multiply',\r
-        handler: function(){\r
-            TestAction.multiply(num.getValue(), function(result, e){\r
-                var t = e.getTransaction();\r
-                if(e.status){\r
-                    out.append(String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',\r
-                        t.action, t.method, Ext.encode(result)));\r
-                }else{\r
-                    out.append(String.format('<p><b>Call to {0}.{1} failed with message:</b><xmp>{2}</xmp></p>',\r
-                        t.action, t.method, e.message));\r
-                }\r
-                out.el.scroll('b', 100000, true);\r
-            });\r
-        }\r
-    });\r
-\r
-    text.on('specialkey', function(t, e){\r
-        if(e.getKey() == e.ENTER){\r
-            call.handler();\r
-        }\r
-    });\r
-\r
-       num.on('specialkey', function(t, e){\r
-        if(e.getKey() == e.ENTER){\r
-            multiply.handler();\r
-        }\r
-    });\r
-\r
-       var p = new Ext.Panel({\r
-        title: 'Remote Call Log',\r
-        //frame:true,\r
-               width: 600,\r
-               height: 300,\r
-               layout:'fit',\r
-               \r
-               items: [out],\r
-        bbar: [text, call, '-', num, multiply]\r
-       }).render(Ext.getBody());\r
-\r
-    Ext.Direct.on('message', function(e){\r
-        out.append(String.format('<p><i>{0}</i></p>', e.data));\r
-                out.el.scroll('b', 100000, true);\r
-    });\r
-});\r
+Ext.require([
+    'Ext.direct.*',
+    'Ext.panel.Panel',
+    'Ext.form.field.Text',
+    'Ext.toolbar.TextItem'
+]);
+
+Ext.onReady(function(){
+    
+    function doEcho(field){
+        TestAction.doEcho(field.getValue(), function(result, event){
+            var transaction = event.getTransaction(),
+                content = Ext.String.format('<b>Successful call to {0}.{1} with response:</b><pre>{2}</pre>',
+                    transaction.action, transaction.method, Ext.encode(result));
+            
+            updateMain(content);
+            field.reset();
+        });
+    }
+    
+    function doMultiply(field){
+        TestAction.multiply(field.getValue(), function(result, event){
+            var transaction = event.getTransaction(),
+                content;
+                
+            if (event.status) {
+                content = Ext.String.format('<b>Successful call to {0}.{1} with response:</b><pre>{2}</pre>',
+                    transaction.action, transaction.method, Ext.encode(result));
+            } else {
+                content = Ext.String.format('<b>Call to {0}.{1} failed with message:</b><pre>{2}</pre>',
+                    transaction.action, transaction.method, event.message);
+            }
+            updateMain(content);
+            field.reset();
+        });
+    }
+    
+    function updateMain(content){
+        main.update({
+            data: content
+        });
+        main.body.scroll('b', 100000, true);
+    }
+    
+    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
+        type:'polling',
+        url: 'php/poll.php',
+        listeners: {
+            data: function(provider, event){
+                updateMain('<i>' + event.data + '</i>');
+            }
+        }
+    });
+    
+    var main = Ext.create('Ext.panel.Panel', {
+        id: 'logger',
+        title: 'Remote Call Log',
+        renderTo: document.body,
+               width: 600,
+               height: 300,
+        tpl: '<p>{data}</p>',
+        tplWriteMode: 'append',
+        autoScroll: true,
+        bodyStyle: 'padding: 5px;',
+        dockedItems: [{
+            dock: 'bottom',
+            xtype: 'toolbar',
+            items: [{
+                hideLabel: true,
+                itemId: 'echoText',
+                xtype: 'textfield',
+                width: 300,
+                emptyText: 'Echo input',
+                listeners: {
+                    specialkey: function(field, event){
+                        if (event.getKey() === event.ENTER) {
+                            doEcho(field);
+                        }
+                    }
+                }
+            }, {
+                itemId: 'echo',
+                text: 'Echo',
+                handler: function(){
+                    doEcho(main.down('#echoText'));
+                }
+            }, '-', {
+                hideLabel: true,
+                itemId: 'multiplyText',
+                xtype: 'textfield',
+                width: 80,
+                emptyText: 'Multiply x 8',
+                listeners: {
+                    specialkey: function(field, event){
+                        if (event.getKey() === event.ENTER) {
+                            doMultiply(field);
+                        }
+                    }
+                }
+            }, {
+                itemId: 'multiply',
+                text: 'Multiply',
+                handler: function(){
+                    doMultiply(main.down('#multiplyText'));
+                }
+            }]
+        }]
+       });
+});