How to update Extjs Progress Bar with JSON results?

Question

Hi,

I am facing some difficulties in getting my progress bar to retrieve its progress from Json results and update the progress bar based on the timer check of every 10 seconds.

I am able to create a json result like this:

{"success":true, "progress":0.2}

I suppose the general idea is that, I need a task with interval set to 10sec, and having the runner to run the task, and when the progress bar starts working, the runner will check on the results from the Json, and update the progress bar as per required.

Code so far:

var task = {
    run: function(){
        // what to add here?
    },
        interval: 10000
    }
}

Having said so, I am having difficulties on:

1. How do I add the Json portion in the task?
2. How do I update the progress bar with the given Json result?

Thank you very much.

Answer 1

Hello jl,

I don't know what stack you are running on but what you can do in term of general approach.

---

How do I add the Json portion in the task?

If you have access to memcached or something like that you can use that to store your progress of the task. On the same fashion you can use a database or even file, since what do you want to store is only a number.

After how to give a progress number of various task that you don't know how much time it would take. I would say if your processing is loop based like you update n rows, you can just use that as a meter.

I think you don't have to worry the progress meter to be accurate just it should give a rough idea where the processing is.

---

How do I update the progress bar with the given Json result?

ExtJS have a TaskManager it would allow you to do an ajax query every n second and pull out the progress and update the attached progress bar.

// Start a simple clock task that updates a div once per second
var task = {
    run: function(){
        Ext.fly('clock').update(new Date().format('g:i:s A'));
    },
    interval: 1000 //1 second
}
Ext.TaskMgr.start(task);

Answer 2

I have managed to get this up and running, apparently this is the missing jigsaw to my question. For anyone who are stuck with this like me.

Basically just add this portion which will retrieve the json result from your stated url, and on success update your progress bar.

And the bare minimum code to be embedded within your task like so:

Ext.Ajax.request({
           url: 'getStatus',
           success: function(r) {
                 var i = Ext.decode(r.responseText).progress;
                 progressbar.updateProgress(count +' completed');
           }
});