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:
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'}, ] });
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') } ] }
精彩评论