Percent done ui component setting percent done does not affect what is displayed

Question

I was trying to change the percent done by using the method setPercentDone() but I found that it would change the underlying data of the component without rerendering it:

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',

    items: [{
        xtype: 'rallypercentdone',
        percentDone: 0.3,
        listeners: {
            render: function(cmp) {
                console.log('cmp.getPercentDone()',cmp.getPercentDone());
                cmp.setPercentDone(0.5);
                console.log('cmp.getPercentDone()',cmp.getPercentDone());
            }
        }
    }],

    launch: function() {
        //Write app code here
    }
});

console:

cmp.getPercentDone() 0.3
cmp.getPercentDone() 0.5

But the component still displays 30%

Answer 1

The PercentDone component is very simple and doesn't officially support changing the percentage displayed. There are two work arounds:

Create a new PercentDone component

You can destroy the existing one and recreate it:

this.down('rallypercentdone').destroy();
this.add({
    xtype: 'rallypercentdone',
    percentDone: 0.5
});

Update PercentDone by touching its internals

This is technically bad as you are diving into the component's implementation, and we may change this in a future release of the SDK, but it's also better than a full destroy in my opinion:

cmp.update(cmp.renderTpl.apply({ percentDone: 0.5 }));

I'll make a note that we should flesh this component out some more for a future release.