开发者

ExtJs Date format in Grid panel

How to display date in ExtJS Gridpanel column (Date wi开发者_JAVA百科th time )

Please provide syntax.


ExtJs provides a separate class to handle Dates and it its formatting. Have a look at Date class. There is enough examples and explanation on how to format a given date or time.

To render dates in grids according to your desired formatting you will have to use a renderer method. In you date column configuration you need to added renderer method as follows:

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

Important point: The return value from the renderer method is displayed onto the column.So, make sure you return your formatted date or time.


1) Create your model

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) For your grid config

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


I made a similar aproach as showed above by Kinjeiro, but I had to omit the xtype:'datecolumn' in order to make it work. So in my case it worked with this code:

  1. Model

    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'},
                ]
    });
    
  2. Grid config

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜