格式化ExtJS网格列

Question

我知道我可以使用Ext.Util.Format类来格式化ExtJs网格的列。 我想知道如何应用以下格式类型：

1. 显示数字的百分比符号而不将其乘以100.因此，如果值为10.34，则应显示10.34％，现在为1034％。
2. 如果数字为负数，则应以红色insde括号显示。 所以-23应该用红色显示为（23）。

谢谢

Answer 1

我本来希望有更多细节：

• 是否要将两个渲染应用于单个列？
• 您能否提供一份简明的代码示例，说明您已尝试过的内容（绑定到网格面板的商店/模型，为存储提供的原始数据，列配置）？

无论如何，我可以尝试一下（你应该先阅读文档 ）。

渲染器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 + '%';
}

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

您可以轻松地为列实现渲染器 ，并根据需要转换结果。 您所要做的就是从渲染器返回转换后的字符串; 此外，您可以访问网格行（以及商店）的完整Ext.data.Record ，因此您还可以根据需要轻松地根据记录中的其他数据进行自定义渲染。