The server returns date in JSON as below,
{
"LastUpdated": "\/Date(1310117748850)\/"
}
I'm using ExtJs grid and the date is not showing up. How I can display it in M/dd/yyyy format?
this.store = new Ext.data.JsonStore({
autoLoad: {
params: {
start: 0,
limit: 10
}
},
autoDestroy: true,
url: '/home/jobs',
idProperty: 'Name',
fields: ['Name',
'Description',
'Type',
'Group',
'Data',
'Schedule.Name',
'Schedule.Description', {
name: 'LastUpdated',
type: 'date'
},
'Schedule.Expression',
'Status'],
root: 'data',
sortInfo: {
field: 'Name',
direction: 'ASC'
}
});
In Grid colModel:
{
header: 'Last Updated',
dataIndex: 'LastUpdated',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
//Grid:
columns: [
{header: 'Last Updated', dataIndex: 'LastUpdated', renderer: Ext.util.Format.dateRenderer('m/d/Y')}
]
//store:
{
field:'LastUpdated',
type:'date',
convert:function(v,j){
return new Date(v.replace(/\/Date((\d+))\//, '$1'));
}
}
In the column section, you could create you own custom date renderer:
columns: [
{header: 'Last Updated', dataIndex: 'LastUpdated', renderer: dateRenderer}
]
And then create a function that processes your date:
function dateRenderer(value, id, r) {
var yourDate = r.data['uploadDate'];
// some js stuff here to strip out just the epoch time
var datevar = new Date(yourDateEpoch);
return Ext.Date.format(datevar, 'm/d/Y')
}
For date field you need also specify dateFormat. E.g.:
{name: 'LastUpdated', type: 'date', dateFormat: 'Y-m-d'}
But in your case you receive date in other format...
The only thing you need to do is to have the following in your model
{name: 'LastUpdated', type: Ext.data.Types.DATE, dateFormat: 'time' }
It tells ExtJS that the data coming into the model for this field is of form epoch time.
Use
return new Date(parseInt(v.replace('/Date(', '')));
full example below,
columns: [
{
header: 'Last Updated',
dataIndex: 'LastUpdated',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}
]
//store:
{
field:'LastUpdated',
type:'date',
convert:function(v, j) {
return new Date(parseInt(v.replace('/Date(', '')));
}
}
Related
I am new to ExtJS.
I have 2 datecolumns I would like to be in UTC format. To do that, I use (from the web) :
renderer: function (value) {
return moment.utc(value).format('YYYY-MM-DD HH:mm:ssZZ');
},
The 2 datecolumns are defined like this :
..., {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start_date',
flex: 1,
editor: {
xtype: 'datetimefield',
itemId: 'startdt',
allowBlank: false,
format: 'd/m/Y H:i:s',
},
renderer: function (value) {
return moment.utc(value).format('YYYY-MM-DD HH:mm:ssZZ');
},
},
{
xtype: 'datecolumn',
header: 'End Date',
dataIndex: 'end_date',
flex: 1,
editor: {
xtype: 'datetimefield',
itemId: 'enddt',
allowBlank: false,
format: 'd/m/Y H:i:s',
},
renderer: function (value) {
return moment.utc(value).format('YYYY-MM-DD HH:mm:ssZZ');
},
},...
For the model :
Ext.define('xxxxx.model.Deployment', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: true
}, {
name: 'name',
type: 'string'
}, {
name: 'start_date',
type: 'date',
}, {
name: 'end_date',
type: 'date'
}, ...
When I click on one of the datetimefield to edit it, it adds one hour which corresponds to the local time (french) and the format is not the same :
Display :
Edition :
How to prevent this during the edition please ? I spent almost 2 days trying to fix this ...
Thanks for any help
Karim
Try to put the 'moment.utc(value).format('YYYY-MM-DD HH:mm:ssZZ');' in the convert or calculate of the model. Something like:
{
name: 'end_date',
type: 'date',
convert: function(value) { // or calculate, have a look in the api doc
return moment.utc(value).format('YYYY-MM-DD HH:mm:ssZZ');
}
}
After that remove the timezone conv from renderer.
Trying to create an extjs app that reads csv data and parses it into a grid, I'm working from a prior jsfiddle that had a simple simpson grid now adding to it the data dynamically.
I've confirmed the csv data retrieval works and parsing it into a json format, I need assistance in how to debug this since the screen doesn't show any bug.
The fiddle is https://jsfiddle.net/32nb4aey/
...
var result_data = parsetoJSON(parsed_result)
Ext.create('Ext.data.Store', {
storeId: 'nordanStore',
fields:[ 'name', 'firstname', 'lastname', 'department', 'login', 'status', 'email'],
data: result_data
});
Ext.create('Ext.grid.Panel', {
title: 'Norda Tech User Data',
store: Ext.data.StoreManager.lookup('nordanStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'First Name', dataIndex: 'firstname' },
{ text: 'Last Name', dataIndex: 'lastname' },
{ text: 'Department', dataIndex: 'department' },
{ text: 'Login', dataIndex: 'login' },
{ text: 'Status', dataIndex: 'status' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
I have got this time stamp: 1400000000, which is 05/13/2014. Is there a way to display this in my grid, panel or dialog as a m/d/Y.
config.cm = new Ext.grid.ColumnModel({
defaults:{
sortable: true
},
columns : [{
{
header: 'date',
dataIndex: 'time',
editable:'false'
}]
});
Is there any way to show epoch time as dateformat?
I think you can do something like this :
config.cm = new Ext.grid.ColumnModel({
defaults:{
sortable: true
},
columns : [{
{
header: 'date',
dataIndex: 'time',
editable:'false',
renderer: formatDate
}]
});
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
}
Hopefully that helps you!
I try to filter an ExtJS4 grid by date.
I have two columns that I fill like this:
{header: 'Start Date', width: 80, dataIndex: 'startdate', filter: { type: 'date', dateFormat: 'Y-m-d'}},
{header: 'End Date', width: 80, dataIndex: 'enddate', filter: { type: 'date', dateFormat: 'Y-m-d'}},
In the grid I see a the date in the right format, but the second I want to filter (before, after, on), I always get an empty result. My data store is local (no ajax) and I want to filter that locally.
Even changing it to the default Y/m/d doesn't seem to work.
Reason for this was a missing type in the model.
Before:
{name: 'startdate'},
{name: 'enddate'},
After:
{name: 'startdate', type: 'date'},
{name: 'enddate', type: 'date'},
Credits to Amensrine! Thanks!
Try this!
var filter = {
ftype: 'filters',
encode: false,
local: false,
filters: [{
// required configs
type: 'date',
dataIndex: 'startdate',
// optional configs
dateFormat: 'm/d/Y', // default
beforeText: 'Before', // default
afterText: 'After', // default
onText: 'On', // default
},{
// required configs
type: 'date',
dataIndex: 'enddate',
// optional configs
dateFormat: 'm/d/Y', // default
beforeText: 'Before', // default
afterText: 'After', // default
onText: 'On', // default
}]};
var Grid = new Ext.grid.GridPanel({
id: 'Grid',
store: store...,
features: [ filter ],
columns : [...]
});
Also you can look example here:
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.ux.grid.filter.DateFilter
I have a datastore and a grid. I am trying to declare a new column called FullName that would combine the two dataindexes. After spending some time researching this issue, I understand it could either be a renderer (grid level) or it could be a custom column in the datastore (mapping?).
Can someone provide a code sample that implements such a column?
// XML
<person>
<first_name>John</first_name>
<last_name>Smith</last_name>
</person>
// Store
Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'TestStore',
fields: ['first_name', 'last_name'],
data: parsed_xml_object,
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: 'person'
}
}
});
// Grid
TestGrid = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: Ext.data.StoreManager.lookup('TestStore'),
columns: [
{ header: 'First Name', dataIndex: 'first_name' },
{ header: 'Last Name Name', dataIndex: 'last_name' },
],
height: 200,
autowidth: true
});
Use a custom renderer:
{
header: "Name",
dataIndex: 'last_name',
renderer: function(value, element, record) {
return record.data['last_name'] + ', ' + record.data['first_name'];
}
}
you can use templeteColumn for it which is a Column definition class which renders a value by processing a Model's data using a configured XTemplate
http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Template