网格面板中的 ExtJs 日期格式答案

【问题标题】：ExtJs Date format in Grid panel网格面板中的 ExtJs 日期格式
【发布时间】：2011-05-11 06:55:23
【问题描述】：

如何在 ExtJS Gridpanel 列中显示日期（日期与时间）

请提供语法。

【问题讨论】：

标签： extjs

【解决方案1】：

ExtJs 提供了一个单独的类来处理日期及其格式。看看Date class。关于如何格式化给定日期或时间有足够的示例和说明。

要根据您所需的格式在网格中呈现日期，您必须使用renderer 方法。在您的日期列配置中，您需要添加如下渲染器方法：

renderer: function(date){
    // process you date to your required format and return it
}

重点：渲染器方法的返回值显示在列上。因此，请确保返回格式化的日期或时间。

【讨论】：

【解决方案2】：

1) 创建模型

Ext.define('App.model.DataWithDate', {
    extend: 'Ext.data.Model',

    fields: [
//...
        {
            name: 'yourDate',
            type: 'date', //or Ext.data.Types.DATE
            dateFormat: 'time' //if you have standart json object with date value like timestamp 1387481693994
        }
//...
    ]
});

2) 用于您的网格配置

{
    columns: [
        {
            header: 'Date',
            dataIndex: 'yourDate',
            xtype:'datecolumn',
            renderer: Ext.util.Format.dateRenderer('d/m/Y H:i')
        }
    ]
}

【讨论】：

【解决方案3】：

我采用了与上面 Kinjeiro 所示类似的方法，但我必须省略 xtype:'datecolumn' 以使其正常工作。所以在我的情况下，它可以使用以下代码：

型号

this.store = new Ext.data.JsonStore({
        proxy:new Ext.data.ScriptTagProxy({
            url: "php/resource.php"
        }),
    root: 'result',
    autoLoad: true,
    fields: [
            {name:'Name',type:'string',mapping:'NAME'},
            {name:'Date',type:'date',dateFormat: 'd/m/Y H:i:s',mapping:'DT_ORDER'},
            ]
});

网格配置

{
  columns: [
    { header:'<b>Name</b>',width:70,sortable:true,dataIndex:'NAME',align:'left'},
    {
      header:'<b>Date</b>',
      width:150,
      sortable:true,
      dataIndex:'DT_ORDER',
     align:'left',
     renderer: Ext.util.Format.dateRenderer('d/m/Y H:i:s')
    }
 ]
}

【讨论】：