Extjs4 ExtJS 4网格分组标题颜色

我有一个带有分组的网格，下面是组标题的定义：

xtype:  'gridpanel',
itemId: 'PRG_GRID',
layout: 'fit',
region: 'center',
store:  'PRGStore',
features: [
    Ext.create('Ext.grid.feature.GroupingSummary', {
       ftype: 'groupingsummary',
       id: 'groupSummary',
       groupHeaderTpl: '<br>&nbsp&nbsp<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: {
...

xtype:'gridpanel'，
itemId:“PRG_网格”，
布局：“适合”，
地区：'中心'，
商店：“PRGStore”，
特点：[
Ext.create（'Ext.grid.feature.GroupingSummary'{
ftype:'groupingsummary'，
id:'groupSummary'，
groupHeaderTpl:“
”+
“{[values.name==1？”高于80%：”+
“[values.name==2？”高于50%：”+
“[values.name==3？”高于50%：”+
“[values.name==4？”“开槽”：”+
“[values.name==77？”收缩：”+
““垃圾”]]]}

”，
startCollapsed：正确
})
],
栏目：{
...

一切正常，但我想展示最后一个标题“垃圾”

---

然后用不同的颜色，例如红色。我找不到正确的方法。请帮忙？

使用模板中的函数来简化它并避免重复

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>'
    }
  }
]

groupHeaderTpl:[
“{[this.styledHeader（values，parent）]}”{
styledHeader:函数（值、父级）{
开关（values.name）{
案例1：
返回此。wrapAnother（“超过80%”）；
案例2：
返回此。wrapAnother（“50%以上”）；
案例3：
返回此。wrapAnother（“50%以上”）；
案例4：
退回此包装盒（“开槽”）；
案例77：
归还此包装物（“合同”）；
违约：
退回此包装袋（“垃圾”）；
}
},
wrapTrash：函数（值）{
返回此.wrapToFont（'red'，值）；
},
包装器：函数（值）{
返回此.wrapToFont（“#4169E1”，值）；
},
wrapToFont:函数（颜色、值）{
调试器
返回“”+值+“”
}
}
]

我应该明白没有解决方案吗？！