如何在 ExtJS 网格中指定单元格的格式？答案

【问题标题】：How to specify a format a cell in an ExtJS grid?如何在 ExtJS 网格中指定单元格的格式？
【发布时间】：2019-12-14 19:46:12
【问题描述】：

例如，我有以下网格：

Value | Currency
------|---------
12.32 | EUR
14.00 | JPY

日元不使用小数，所以我想知道 ExtJS 是否可以为每个单元格指定小数位。在这种情况下，只显示 14 而不是 JPY 的 14.00。

我查看了the number column，但据我所见，没有指定单元格格式的选项。

如何在 ExtJS 网格中指定单元格的格式？

【问题讨论】：

标签： javascript extjs

【解决方案1】：

您可以使用列 renderer 来执行此操作。您检查货币的价值，如果是日元，则显示不带小数的值：

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.column.Column-cfg-renderer

columns: [
    {
        text: "Value",
        flex: 1,
        dataIndex: 'value',
        renderer: function (value, metaData, record) {
            if (record.data.currency === 'JPY') {
                return Ext.util.Format.number(value, '0');
            }
            return value;
        }
    },
    {
        text: "currency",
        flex: 1,
        dataIndex: 'currency'
    }
]

这是一个有效的小提琴：http://jsfiddle.net/Xpe9V/1608/

【讨论】：

【解决方案2】：

虽然这个问题似乎已经得到解答，但我想向您指出一个完全不同的方向。为什么不转换store 的model（记录）上的值？ 这种方法的好处是您不必担心应用程序中任何地方的值，例如过滤、在表单上显示或其他任何内容。

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
    {
        name: 'value',
        convert: function (value, record) {
            var returnValue = value;

            if (record.get('currency') === 'JPY') {
                returnValue = Ext.util.Format.number(value, '0');
            }

            return returnValue;
        }
    },
    'currency'
    ]
});

有关模型字段和可能性的更多信息：
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.field.Field

【讨论】：

【解决方案3】：

您可以实现一个自定义网格单元格，该单元格在货币单元格中查找值，然后执行该值的格式设置..

类似：

Ext.define('xxx.view.dynamicdatagrid.CustomCurrencyValueFormatterColumn',
{
extend: 'Ext.grid.column.Column',
xtype: 'customCurrencyValueFormatterColumn',


renderer: function (value, metaData, record, row, col, store, gridView) {

   var returnValue ='';
  //look here in the record parameter for the value in the currency 
   var currency = row.data.Currency;

  //make a switch and call a custom formatter function dependend on the currency
   switch(currency){
       case 'Yen':
         returnValue = customFunction(value);
         break;
        ....
   }

 return returnValue;

},

initComponent: function () {
    var me = this;
    this.callParent();
}

});

【讨论】：

【解决方案4】：

您可以通过在其配置中省略 xtype 字段来将列类型设置为默认值。

在网格的字段属性中，使用“转换”功能以编程方式设置每个值的格式。例如：

var fields = [      
        {
            name: 'value', type: 'string', mapping: 'value',
            convert: function (v, record) {
               if (record.data.currency === 'JPY') {
                  // format your string here
                  // var value = ...
                  return value;
               }
            }
        },                 
    ];

【讨论】：