Extjs4.1 - How to working with Progress bar and php - extjs

Question

I try to create a Progress bar wait for server do something. When server finish then processbar will completed.
Here is my js
var pbar4 = Ext.create('Ext.ProgressBar', {
text:'Waiting on you...',
width: 300,
renderTo:Ext.getBody()
});
Ext.Ajax.request({
url: 'getStatus.php',
success: function(r) {
if (r.responseText == 100)
pbar4.updateText('All finished!');
else
pbar4.updateProgress(r.responseText, r.responseText+'% completed...');
}
});
and getStatus.php
$total = 10000;
for ($i = 0; $i <= $total; $i++) {
echo $i/$total*100;
}
But when i run that look like
How to do that thanks

Answer 1

What you have here is confusion about how ajax reacts with the page on the server. More specifically that pages aren't as stateful as you imagine them to be.
What you are assuming (or wanting) to happen:
Ajax request is made to PHP page from web page
PHP page receieves ajax request
PHP page starts loop
PHP page starts printing numbers
PHP page returns the current number it's on to the web page doing the ajax request
web page updates progress bar with first value
web page requests with ajax again
PHP prints out the current number it's on and returns that value to the requesting page
web page updates progress bar with current value
rinse and repeat steps 7 through 9
What is actually happening is quite simple:
Ajax request is made to PHP page from web page
PHP page receieves ajax request
PHP page starts loop
PHP prints all numbers in loop
PHP returns list of all numbers to web page
Web page prints list of all numbers as an update to the progress listener
To fix this issue you actually need to have the PHP page somehow be stateful as to the progress you want to represent here. This can be done by having PHP start a process (new thread, not sure if php has this) that writes numbers to a file on the first request and then have subsequence requests from the webpage read the last number in the file and have it return it. You could also use a database to do something similar.

Answer 2

In case somebody's looking now, I am also thinking of using a progressbar to monitor my Ajax. As previously mentioned, you cannot loop-print in PHP and read that. I did it like this:
Create a monitor ID in ExtJS.
Do the Ext.Ajax, passing the monitor ID
Create a Ext.util.TaskRunner();, monitoring a server file containing Jand updating progress bar
PHP side creates JSON file from monitor ID passed by ExtJS.
Update the JSON file in PHP by calling this several times:
Code:
$cnt = 0;
$total = 17; //number of times sendStatus(); was called
$monitorPath = '/path/to/file' . $_REQUEST['fileNameFromExtJS']
function sendStatus()
{
global $cnt, $total, $monitorPath;
$statusMessage = array(
"Tinkering stuff..",
"50% complete..",
"Sending...",
"Done!");
$statusMessage = $statusMessage[$cnt];
$cnt ++;
$str = '{"count": '.$cnt.', "total": '.$total.', statusMessage: "'.$statusMessage.'"}';
file_put_contents($monitorPath, $str, LOCK_EX );
}
Reference:
How to update Extjs Progress Bar with JSON results?
Progress bar in your web application, ExtJS / JAVA