Форматирование столбца сетки ExtJS

Question

Я знаю, что могу форматировать столбец сетки ExtJs с помощью класса Ext.Util.Format. Я хочу знать, как я могу применять следующие типы форматов:

1. Отображение процента символ для числа без умножения на 100. Таким образом, если значение 10,34 оно должно показать 10.34%, а теперь 1034%.
2. Если число отрицательное, оно должно быть указано в скобках с красным цветом. поэтому -23 должен быть показан красным цветом как (23).

Спасибо

Answer 1

Вы можете легко реализовать renderer для столбцов, и преобразовывать результаты, однако вы хотели бы. Все, что вам нужно сделать, это вернуть преобразованную строку из средства визуализации; плюс, у вас есть доступ к полному Ext.data.Record для строки сетки (а также для хранилища, если на то пошло), поэтому вы также можете легко выполнять персонализированные визуализации на основе других данных в записи, если это необходимо.

Answer 2

Да, вы можете достичь через концепцию renderer, пожалуйста, ниже пример для ваших запросов.

{ 
     text  : 'Number (Percentage)', 
     width : 80, 
     sortable : true, 
     renderer : function(val) { 
      if (val > 0) { 
       return '<span style="color:green;">' + val + '</span>'; 
      } else if (val < 0) { 
       return '<span style="color:red;">' + val + '</span>'; 
      } 
      return val+"%"; 
     }, 
     dataIndex: 'numberChange' // place your dataindex binding here 
    } 

Спасибо, Надежда, это поможет вам ...

Answer 3

Я хотел бы иметь еще несколько деталей:

• Вы хотите применить оба визуализаций в одном столбце?
• Не могли бы вы предоставить пример сжатого кода того, что вы уже пробовали (хранилище/модель привязаны к панели сетки, необработанные данные для подачи хранилища, конфигурации столбцов)?

В любом случае, я могу попробовать (сначала вы должны read the doc).

Renderer 1:

renderer: function (value) { 
    return value + '%'; 
} 

Renderer 2:

renderer: function (value) { 
    return value < 0 
     ? '<span style="color:red">(' + Math.abs(value) + ')</span>' 
     : value; 
} 

монстра Франкенштейна:

renderer: function (value) { 
    return value < 0 
     ? '<span style="color:red">(' + Math.abs(value) + '%)</span>' 
     : value + '%'; 
}