PDA

View Full Version : Updating Progressbar



AakashGC
25 Jul 2014, 4:07 AM
Hi,

I am having trouble transferring the progress of a job from a displayfield to a progressbar .
the view part is :

getJobPanel : function() {
//Job Panel
var jobPanel = Ext.create('Ext.form.Panel', {
region:'north',
border:false,
bodyStyle :'padding:10px 10px 10px 0px',
//border: false,

defaults:{
width: 400,
labelWidth: 150,
labelAlign: 'right'
},
height: 200,
items: [
{
xtype: 'displayfield',
name: 'jobName',
fieldLabel: 'Job Name'
},
{
xtype: 'displayfield',
name: 'startTime',
fieldLabel: 'Job Start Time'

},{
xtype: 'displayfield',
name: 'endTime',
fieldLabel: 'Job End Time'
},{
xtype: 'displayfield',
name: 'percentageProgress',
fieldLabel: 'Percentage Done'
},
{
xtype:'progressbar',
text:'Initialising',
width: 100
}

]
});
var down=jobPanel.down('progressbar');
down.updateProgress(' ?? ');
return jobPanel;

},

I want to display the percentage progress from the displayfield name: 'percentageProgress' to the progressbar which i have added .

The controller part of this is :

loadJobDetailedView: function(data) {
var jobPanel = this.jobDetailedView.jobPanel;

//create record
var record = Ext.create('yammer.cm.configuration.deploy.model.DeployJobDetailsModel',
{ jobName:data.jobName,
startTime:this.getFormattedTime(data.startTime),
endTime:this.getFormattedTime(data.endTime),
percentageProgress:data.percentageProgress,
noofdevices:data.noofdevices});

jobPanel.getForm().loadRecord(record);

this.jobDetailedView.doLayout();

},

The data comes from :
options['success'] = function(data) {
var data = data['net.yammer.jmp.cm.ui.to.deploy.DeployJobTO'][0];
THIS.loadJobDetailedView(data);

};

and the model for this is :
Ext.define('yammer.cm.configuration.deploy.model.DeployJobDetailsModel', {
extend: 'Ext.data.Model',

fields : [
{
name : 'jobName',
type : 'string'

},
{
name : 'startTime',
type : 'string'

},
{
name : 'endTime',
type : 'string'
},
{
name : 'percentageProgress',
type : 'string'

},
{
name : 'noofdevices',
type : 'int'

}
]

});

This is the code for one of the webpages in one of the organizations, just wanted to know that can i display the progress in the progressbar if i have only this much info , if not then for which things should i look for or modify .

Any help will be very valuable .

Thanks

skirtle
25 Jul 2014, 10:35 AM
So essentially you just need something like:


progress.updateProgress(0.5);

The key then is where you get the value 0.5. Tying it to the displayfield is a bit odd as they aren't editable. However, you could listen on the field's change event to perform the update if that's really what you want.

Alternatively just populate it at the same time you populate the form with loadRecord. You could wrap it all up in a method on the relevant object to keep the abstraction clean.

Note that you'll need to convert your string percentage into a number between 0 and 1 before calling updateProgress.

AakashGC
27 Jul 2014, 11:36 PM
Thanks for the reply , but can you show it in code how to exactly do this . I tried something really lame like :

down.updateProgress(percentageProgress/100,'Task'+percentageProgress+'completed');

but it will show you exactly what i am trying to achieve there . I cant add a new parameter in the model as the value for percentageProgress probably comes from a backend process and i dont know how to tie that to a new variable , so i only have this variable 'percentageProgress' to work with , and i want to display the value displayed in the displayfield name : 'percentageProgress' in the progressbar .