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

How to specify a format a cell in an ExtJS grid?

本文关键字：单元格 格式 ExtJS 网格      更新时间：2023-09-26

例如，我有如下的网格:

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

日元不使用小数，所以我想知道ExtJS是否可以为每个单元格指定小数点。在本例中，日元只显示14而不是14.00。

我已经看了数字列，但是从我所看到的，没有指定单元格格式的选项。

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

您可以使用列渲染器来完成此操作。检查货币的值，如果是JPY，则显示不带小数的值:

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/

虽然这个问题似乎得到了回答，但我想向您指出一个完全不同的方向。为什么不转换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

您可以实现一个自定义网格单元格，它查找货币单元格中的值，然后对值执行格式化。

类似:

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();
}

});

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

在网格的fields属性中使用'convert'函数以编程方式格式化每个值。例如:

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;
               }
            }
        },                 
    ];
相关文章：