格式化 ExtJS 网格列

Posted 2023-02-26

【中文标题】格式化 ExtJS 网格列

【英文标题】：Formatting ExtJS grid column

【发布时间】：2013-06-21 03:48:17

【问题描述】：

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

显示数字的百分号而不将其乘以 100。因此，如果值为 10.34，则应显示 10.34%，现在显示 1034%。 如果数字为负数，则应在括号内以红色显示。所以 -23 应该以红色显示为 (23)。

谢谢

【参考方案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 + '%';

【参考方案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
    

谢谢，希望对你有帮助...

【参考方案3】：

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