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 a07ea7a..0407fb9 100644 (file)
--- a/examples/direct/direct.js
+++ b/examples/direct/direct.js
@@ -1,88 +1,109 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.onReady(function(){
-    Ext.Direct.addProvider(
-        Ext.app.REMOTING_API,
-        {
-            type:'polling',
-            url: 'php/poll.php'
-        }
-    );
-
-    var out = new Ext.form.DisplayField({
-        cls: 'x-form-text',
-        id: 'out'
-    });
-
-    var text = new Ext.form.TextField({
-        width: 300,
-        emptyText: 'Echo input'
-    });
-
-    var call = new Ext.Button({
-        text: 'Echo',
-        handler: function(){
-            TestAction.doEcho(text.getValue(), function(result, e){
-                var t = e.getTransaction();
-                out.append(String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',
-                       t.action, t.method, Ext.encode(result)));
-                out.el.scroll('b', 100000, true);
-            });
-        }
-    });
-
-    var num = new Ext.form.TextField({
-        width: 80,
-        emptyText: 'Multiply x 8',
-        style:  'text-align:left;'
-    });
-
-    var multiply = new Ext.Button({
-        text: 'Multiply',
-        handler: function(){
-            TestAction.multiply(num.getValue(), function(result, e){
-                var t = e.getTransaction();
-                if(e.status){
-                    out.append(String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',
-                        t.action, t.method, Ext.encode(result)));
-                }else{
-                    out.append(String.format('<p><b>Call to {0}.{1} failed with message:</b><xmp>{2}</xmp></p>',
-                        t.action, t.method, e.message));
-                }
-                out.el.scroll('b', 100000, true);
-            });
-        }
-    });
+Ext.require([
+    'Ext.direct.*',
+    'Ext.panel.Panel',
+    'Ext.form.field.Text',
+    'Ext.toolbar.TextItem'
+]);
 
-    text.on('specialkey', function(t, e){
-        if(e.getKey() == e.ENTER){
-            call.handler();
-        }
-    });
-
-       num.on('specialkey', function(t, e){
-        if(e.getKey() == e.ENTER){
-            multiply.handler();
+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 p = new Ext.Panel({
+    
+    var main = Ext.create('Ext.panel.Panel', {
+        id: 'logger',
         title: 'Remote Call Log',
-        //frame:true,
+        renderTo: document.body,
                width: 600,
                height: 300,
-               layout:'fit',
-               
-               items: [out],
-        bbar: [text, call, '-', num, multiply]
-       }).render(Ext.getBody());
-
-    Ext.Direct.on('message', function(e){
-        out.append(String.format('<p><i>{0}</i></p>', e.data));
-                out.el.scroll('b', 100000, true);
-    });
+        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'));
+                }
+            }]
+        }]
+       });
 });