1

我正在尝试覆盖或扩展现有组件 - Rally.ui.PercentDone组件。我想为它提供一个投资组合项目，其中包含使用 Rally 原生应用程序使用的相同颜色编码（Rally健康颜色计算器）渲染它所需的所有数据。

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

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
            });

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

谢谢你的帮助。

4

0 回答 0