既存のコンポーネント ( 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
});
しかし、代わりにコンポーネントを拡張してそれを行う方法を理解したいと思います。
ご協力いただきありがとうございます。