extjs 将格式应用于网格列答案

【问题标题】：extjs apply formatting to grid columnextjs 将格式应用于网格列
【发布时间】：2016-04-16 00:27:56
【问题描述】：

在 extjs 中，如果我有这样的网格定义：

xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
           {
             xtype: 'gridcolumn',
             header: 'ID',
             dataIndex: 'someID',
             sortable: true,
              width: 100
            }

有没有办法对这个列应用一些格式？例如，这个字段是一个数字，如果我想设置一个小数精度..我可以这样做吗？还是在我的 java 文件中加载商店时需要应用格式？我猜是后者？？

【问题讨论】：

标签： extjs

【解决方案1】：

使用“渲染器”选项。你可以在那里定义你的功能。例如，我想显示包含在某个标签中的 someID：

columns: [
       {
         xtype: 'gridcolumn',
         header: 'ID',
         dataIndex: 'someID',
         sortable: true,
         width: 100,
         renderer: function(value) {
             // your logic here
             return "<b>" + value + "</b>";
         }
        }

【讨论】：

有没有办法通过ext设计器在ui.js文件中指定一个renderer属性？因为，如果你手动编辑 ui.js 文件，下次它会被设计器覆盖。如果您将“渲染器”添加到 .js 文件中，我认为您需要复制整个列定义
不知道。我不使用 Ext Designer。我正在手动编写代码。
@Victor：如果您更新元数据文件夹中的文件，那么 Architect 将被覆盖。我在 Architect 3 中做到了这一点

【解决方案2】：

如果您想在网格列中显示小数精度，您应该在存储中定义“float”类型的数据索引：

...
, {name: 'column_data_name', type: 'float'}
...

然后在网格列定义中，您应该按照 KomarSerjio 的建议指定一个渲染器并使用它。

function floatRenderer(value) {
    if (value) {
        var val = value.toFixed(2);

        return addSeparatorsNF(val, '.', ',', '.');
    }
    else return "";
}
...
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer ,  align: 'right' }
...

addSeparatorsNF功能已被推荐here。

【讨论】：

【解决方案3】：

用于格式化您的网格十进制值以将点后限制为两个数字，或者直到您只想在列中使用以下代码：渲染器：Ext.util.Format.numberRenderer('00.00')

【讨论】：

【解决方案4】：

我尝试了 KomarSerjio 建议的渲染器配置，它在使用 Sencha Ext JS 6 时对我来说非常有效。我用它来零填充我收到的一些时间数据，这些数据缺少前缀零，使其成为 24 小时时间。所以我尝试了以下方法，效果很好！谢谢你。

Ext.define('ViewLL.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',
    reference: 'mainList',
    flex: 1,


    requires: [
        'ViewLL.store.Datastore'
    ],

    title: 'Records',

    store: {
        type: 'datastore'

    },

    columns: 
        { text:'Pln On Site Time', 
          dataIndex:'plnOnSiteTime', 
          renderer: function (number) {
          if (number<=2400) { number = ("000"+number).slice(-4); }
          return number;
          }
        }

});

在渲染器配置之前，我的网格显示值，例如926、800、1000。通过渲染器配置发布添加功能我的网格显示值，例如0926、0800、1000

【讨论】：