如何在ExtJS網格中指定單元格的格式？

Question

例如，我有以下電網：

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

的日元不使用小數，所以我想知道是否有可能與ExtJS的指定每個單元的小數位是什麼。在這種情況下，只顯示14日元而不是14.00日元。

我看過the number column，但從我所看到的沒有指定單元格格式的選項。

如何在ExtJS網格中指定單元格的格式？

Answer 1

您可以使用列渲染器來執行此操作。你檢查的貨幣的價值，如果它是日元，則顯示無小數值：

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/

Answer 2

您可以實現自定義的網格單元，其查找貨幣單元格中的值，然後執行該值的格式化。

類似於：

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

}）;

Answer 3

您可以通過在其配置上省略xtype字段來將您的列類型設置爲默認值。

在網格的字段屬性中，使用'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; 
       } 
      } 
     },     
    ]; 

Answer 4

雖然這個問題似乎被回答，但我想指出你完全是另一個方向。爲什麼不轉換store的model（記錄）的值？ 這種方法的好處在於，您不必擔心應用程序中任何位置的值，例如篩選，在表單或其他任何位置顯示它。
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.field.Field

：關於車型領域和準備

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' 
    ] 
}); 

更多信息