Question

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

请提供语法。

Answer 1

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

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

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

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

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

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

“网格”面板中的ExtJs日期格式

3 个答案: