examples/direct/direct.js

   1 Ext.require([
   2     'Ext.direct.*',
   3     'Ext.panel.Panel',
   4     'Ext.form.field.Text',
   5     'Ext.toolbar.TextItem'
   6 ]);
   7
   8 Ext.onReady(function(){
   9
  10     function doEcho(field){
  11         TestAction.doEcho(field.getValue(), function(result, event){
  12             var transaction = event.getTransaction(),
  13                 content = Ext.String.format('<b>Successful call to {0}.{1} with response:</b><pre>{2}</pre>',
  14                     transaction.action, transaction.method, Ext.encode(result));
  15
  16             updateMain(content);
  17             field.reset();
  18         });
  19     }
  20
  21     function doMultiply(field){
  22         TestAction.multiply(field.getValue(), function(result, event){
  23             var transaction = event.getTransaction(),
  24                 content;
  25
  26             if (event.status) {
  27                 content = Ext.String.format('<b>Successful call to {0}.{1} with response:</b><pre>{2}</pre>',
  28                     transaction.action, transaction.method, Ext.encode(result));
  29             } else {
  30                 content = Ext.String.format('<b>Call to {0}.{1} failed with message:</b><pre>{2}</pre>',
  31                     transaction.action, transaction.method, event.message);
  32             }
  33             updateMain(content);
  34             field.reset();
  35         });
  36     }
  37
  38     function updateMain(content){
  39         main.update({
  40             data: content
  41         });
  42         main.body.scroll('b', 100000, true);
  43     }
  44
  45     Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
  46         type:'polling',
  47         url: 'php/poll.php',
  48         listeners: {
  49             data: function(provider, event){
  50                 updateMain('<i>' + event.data + '</i>');
  51             }
  52         }
  53     });
  54
  55     var main = Ext.create('Ext.panel.Panel', {
  56         id: 'logger',
  57         title: 'Remote Call Log',
  58         renderTo: document.body,
  59                 width: 600,
  60                 height: 300,
  61         tpl: '<p>{data}</p>',
  62         tplWriteMode: 'append',
  63         autoScroll: true,
  64         bodyStyle: 'padding: 5px;',
  65         dockedItems: [{
  66             dock: 'bottom',
  67             xtype: 'toolbar',
  68             items: [{
  69                 hideLabel: true,
  70                 itemId: 'echoText',
  71                 xtype: 'textfield',
  72                 width: 300,
  73                 emptyText: 'Echo input',
  74                 listeners: {
  75                     specialkey: function(field, event){
  76                         if (event.getKey() === event.ENTER) {
  77                             doEcho(field);
  78                         }
  79                     }
  80                 }
  81             }, {
  82                 itemId: 'echo',
  83                 text: 'Echo',
  84                 handler: function(){
  85                     doEcho(main.down('#echoText'));
  86                 }
  87             }, '-', {
  88                 hideLabel: true,
  89                 itemId: 'multiplyText',
  90                 xtype: 'textfield',
  91                 width: 80,
  92                 emptyText: 'Multiply x 8',
  93                 listeners: {
  94                     specialkey: function(field, event){
  95                         if (event.getKey() === event.ENTER) {
  96                             doMultiply(field);
  97                         }
  98                     }
  99                 }
 100             }, {
 101                 itemId: 'multiply',
 102                 text: 'Multiply',
 103                 handler: function(){
 104                     doMultiply(main.down('#multiplyText'));
 105                 }
 106             }]
 107         }]
 108         });
 109 });