Rally Extjs改变了现有组件的功能

Question

我试图覆盖或扩展现有组件 - Rally.ui.PercentDone组件。我想为它提供一个项目组合项目，其中包含使用Rally本地应用程序使用的相同颜色编码（Rally Health Color Calculator）呈现它所需的所有数据。

我真的只需要传递正确记录的功能。到目前为止，这是我的想法：

Ext.define('Custom.PercentDone', {
    requires: ['Rally.ui.renderer.template.progressbar.PortfolioItemPercentDoneTemplate', 'Rally.util.HealthColorCalculator'],
    extend  : 'Rally.ui.PercentDone',
    alias   : 'widget.cpercentdone',


    config: {
        record: null
    },

    constructor: function(config) {
        config = this.config;
        this.renderTpl = Ext.create('Custom.renderer.template.progressbar.PercentDoneTemplate', {
            calculateColorFn: Ext.bind(function(recordData) {
                console.log('called my custom coloring fn');
                var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(config.record, config.percentDoneName);
                return colorObject.hex;
            }, this)
        });
        this.renderData = config;
        this.mergeConfig(config);
        this.callParent([this.config]);
    }
});

var custom = Ext.create('Custom.PercentDone', {
    record: item,
    percentDoneName: 'PercentDoneByStoryPlanEstimate',
});

但我没有调用我的计算颜色函数而不是默认值。

我通过覆盖来完成工作：

            var percentDoneByStoryCountEl = Ext.create("Rally.ui.PercentDone", {
                record: item,
                percentDoneName: "PercentDoneByStoryCount",
                percentDone: item.PercentDoneByStoryCount
            });
            tpl = percentDoneByStoryCountEl.renderTpl;
            tpl.calculateColorFn = function (recordData) {
                var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(item, "PercentDoneByStoryCount");
                return colorObject.hex;
            };

            Ext.override(percentDoneByStoryCountEl, {
                renderTpl: tpl
            });

但我想通过扩展组件来弄清楚如何做到这一点。

感谢您的帮助。