formatting - 格式化 ExtJS 网格列

Question

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

1. 显示一个数字的百分比符号而不将其乘以 100。因此，如果该值为 10.34，则应显示 10.34%，现在显示为 1034%。
2. 如果数字为负数，则应在括号内以红色显示。所以 -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的网格行（以及商店，就此而言），因此如果需要，您还可以轻松地根据记录中的其他数据进行自定义渲染。