Цвет заголовка группировки сетки ExtJS 4

Question

У меня есть сетка с группировкой, ниже приведено определение заголовков групп:

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: {
...

, и все работает хорошо, но я хочу отобразить последний заголовок "TRASH" другим цветом, чем # 4169E1, напримерв красном.И я не могу найти правильный способ сделать это.Будьте добры помочь?

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