CODEWITHSUNDEEP
extjsextjs4.1
DeLe
DeLe

Reputation: 2480

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

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

enter image description here

How to do that thanks

Upvotes: 0

Views: 843

Answers (2)

niCad
niCad

Reputation: 92

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

Upvotes: 0

Reimius
Reimius

Reputation: 5712

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:

  1. Ajax request is made to PHP page from web page
  2. PHP page receieves ajax request
  3. PHP page starts loop
  4. PHP page starts printing numbers
  5. PHP page returns the current number it's on to the web page doing the ajax request
  6. web page updates progress bar with first value
  7. web page requests with ajax again
  8. PHP prints out the current number it's on and returns that value to the requesting page
  9. web page updates progress bar with current value
  10. rinse and repeat steps 7 through 9

What is actually happening is quite simple:

  1. Ajax request is made to PHP page from web page
  2. PHP page receieves ajax request
  3. PHP page starts loop
  4. PHP prints all numbers in loop
  5. PHP returns list of all numbers to web page
  6. 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.

Upvotes: 2

Related Questions