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

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

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

Спасибо


formatting extjs4.1 extjs-grid
person SharpCoder    schedule 21.06.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Хотелось бы подробнее:

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

В любом случае, я могу попробовать (вам следует сначала прочитайте документ).

Рендерер 1:

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

Рендерер 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 + '%';
}
person leaf    schedule 22.06.2013

arrow_upward
1
arrow_downward

Да, вы можете достичь этого с помощью концепции 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
    }

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

person Hariharan    schedule 21.06.2013

arrow_upward
0
arrow_downward

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

person existdissolve    schedule 21.06.2013