我有一个带有分组的网格,以下是组标题的定义:
xtype: 'gridpanel',
itemId: 'PRG_GRID',
layout: 'fit',
region: 'center',
store: 'PRGStore',
features: [
Ext.create('Ext.grid.feature.GroupingSummary', {
ftype: 'groupingsummary',
id: 'groupSummary',
groupHeaderTpl: '<br>  <font size="2" color="#4169E1"><b>' +
' {[values.name == 1 ? "Above 80%" : ' +
'[values.name == 2 ? "Above 50%" : ' +
'[values.name == 3 ? "Above 50%" : ' +
'[values.name == 4 ? "Notching" : ' +
'[values.name == 77 ? "Contracted" : ' +
'"TRASH"] ] ] ] ]} </b><br><br>',
startCollapsed: true
})
],
columns: {
...
一切正常,但我想显示最后一个标题“ TRASH” 颜色与#4169E1不同,例如红色的。而且我找不到正确的方法。乐于助人吗?
答案 0 :(得分:1)
使用模板内的函数来简化模板并避免重复。
groupHeaderTpl: [
'{[this.styledHeader(values,parent)]}', {
styledHeader: function(values, parent) {
switch (values.name) {
case 1:
return this.wrapAnother("Above 80%");
case 2:
return this.wrapAnother("Above 50%");
case 3:
return this.wrapAnother("Above 50%");
case 4:
return this.wrapAnother("Notching");
case 77:
return this.wrapAnother("Contracted");
default:
return this.wrapTrash("TRASH");
}
},
wrapTrash: function(value) {
return this.wrapToFont('red', value);
},
wrapAnother: function(value) {
return this.wrapToFont('#4169E1', value);
},
wrapToFont: function(color, value) {
debugger
return '<font size="2" color="' + color + '">' + value + '</font>'
}
}
]