PDA

View Full Version : updating a progressbar in MVC architecture



AakashGC
28 May 2014, 5:57 AM
Hi,

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();
runner.start(task);
}
}
});
function successHandler (response, options)
{
if(response)
{ //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.
Thanks,

scottmartin
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:
http://extjs.eu/ext-touch-component-life-cycle/

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'
}];

this.callParent();
}
});

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

init: function() {
var me = this;

me.control({
'test button': {
click: me.updateProgress
}
});
},

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

bar.updateProgress(.5);
}
});

Ext.application({
name: 'MyApp',

controllers: [
'Test'
],

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()

AakashGC
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..
=D>




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

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

I have reset. Glad it helped, thanks.