JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/direct/php/api.php"></script>
JavaScript
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: 'http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/direct/php/poll.php',
listeners: {
data: function(provider, event){
updateMain('<i>' + event.data + '</i>');
}
}
});
var main = Ext.create('Ext.panel.Panel', {
// The id is used for styling
id: 'logger',
title: 'Remote Call Log',
renderTo: document.body,
width: 600,
height: 300,
...