JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all.js"></script>
<input id="btn1" type="button" value="run" />
<div id="p1">here pbar is going to be</div>
<p id="p1text">Some text here</p>
JavaScript
var mystatus = "";
Ext.onReady(function() {
var pbar1 = new Ext.ProgressBar({
text: 'Initializing...'
});
var count = 0;
mystatus = null;
var btn1 = Ext.get('btn1');
btn1.dom.disabled = false;
//setup request
Ext.Ajax.request({
//NOTICE: I'm using another url and method according to http://doc.jsfiddle.net/use/echo.html
url: '/echo/json/',
method: 'POST',
//NOTICE: I'm sending in json what your server has to return
params: {
json: Ext.encode({
"status": "status1",
"steps": "6"
}),
delay: 1
},
success: function(result, request) {
mystatus = Ext.decode(result.responseText).status;
count = Ext.decode(result.responseText).steps;
},
failure: function(result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});
btn1.on('click', function() {
Ext.fly('p1text').update('Working');
if (!pbar1.rendered) {
pbar1.render('p1');
} else {
pbar1.text = 'Initializing...';
pbar1.show();
}
// NOTICE: The last parameter is step. I'm counting step on frontend.
// You must do it on serverend
run2(pbar1, Ext.get('btn1'), function() {
pbar1.reset(true);
Ext.fly('p1text').update('Done.').show();
}, 1);
// NOTICE: you should run instead following code
if (0) //Don't forget remove this line
run(pbar1, Ext.get('btn1'), function() {
pbar1.reset(true);
Ext.fly('p1text').update('Done.').show();
});
});
});
var run2 = function(pbar, btn, cb, step) {
Ext.Ajax.request({
url: '/echo/json/',
method: 'POST',
//NOTICE: I'm sending in json what your server has to return
params: {
json: Ext.encode({
...