View Full Version : updating a progressbar in MVC architecture

28 May 2014, 5:57 AM

I am implementing a UI based on MVC design , and have made my controller, view and rest . But am stuck in a very small problem :s.
I want to update the progressbar(which i have implemented inside a window component) from a JSON file(which returns the percentage completed) using ajax .
I have implemented this progressbar in a progressbar.js file inside the view>user directory as specified in the docs.. and have included this view in the controller .
My sample code for progressbar is :

Ext.define('AM.view.user.progressbar', {
alias: 'widget.userprogressbar',
extend: 'Ext.ProgressBar',
width: 300,
text: 'Initializing ...',
listeners: {
'render':function() {
var task = { run: function()
{ Ext.Ajax.request({
url: 'mystatus.json',
success: successHandler
interval: 1000
var runner = new Ext.util.TaskRunner();
function successHandler (response, options)
{ //alert("Response is coming");

var json = Ext.JSON.decode(response.responseText);
percentage =json.value;
?.updateProgress(percentage, 'Task ' + percentage + ' Complete');


So my problem here is, how to call the updateProgress with an instance of this progressbar ..
var p=Ext.define('........
p.updateProgress ... this doesnt work,
nor i can use:: var p=Ext.create... because of the MVC pattern..
can anyone suggest me the correct way to do it while following the MVC Architecture.

28 May 2014, 7:53 AM
var p=Ext.define('........

You need to create an instance using Ext.create(), Ext.widget(), or as an xtype

Here is a good article on define/create of a component:

You can do the following:

Ext.define('MyApp.view.Test', {
extend: 'Ext.form.Panel',
alias: 'widget.test',

layout: 'vbox',

initComponent: function() {
this.items = [{
xtype: 'progressbar', // or your userprogressbar xtype
width: 300
xtype: 'button',
text : 'Increment'


Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',

init: function() {
var me = this;

'test button': {
click: me.updateProgress

updateProgress : function(btn) {
var form = btn.up('form'),
bar = form.down('progressbar');


name: 'MyApp',

controllers: [

launch: function() {
new Ext.container.Viewport({
layout: 'fit',
items: {
xtype: 'test'

Or you can created an instance with var pb = Ext.widget('userprogressbar',{..}) // or Ext.create()

29 May 2014, 4:48 AM
Thanks a lot, I was thinking of doing it using Ext.define only . and your code logic worked like a charm..

I accidently chose my this reply as the best answer... :s .. not getting undone ...:s

29 May 2014, 5:22 AM
I accidently chose my this reply as the best answer

I have reset. Glad it helped, thanks.