Question

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

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

谢谢

Answer 1

我希望有更多细节：

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

无论如何，我可以尝试一下（你应该先read the doc）。

渲染器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

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

格式化ExtJS网格列

3 个答案: