extjs datefield browser not showing up - extjs

Question

So I can't seem to find anything on this, but I'm having a weird cross browser issue that I can't seem to find out why it's happening. I have a datefield that is supposed to pull back a certain date. In Chrome the date shows up, while in FF and in IE it doesn't show up.
The weird part is, I looked at the data that comes back from the backend and the date is there, it's just setting the values of the input (nor of any location in which we ask to pull the data. not even in a grid)
Is there anything that I'm missing that would make it show up properly in Chrome but not in FF and IE? Maybe something in the stores or models?
I'm on ExtJS 4.1.2 in case that helps answer things
View(grid)
Ext.define('MyApp.view.ContractGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ContractGrid',
height: 443,
id: 'contractgrid',
itemId: '',
width: 667,
title: 'Contract Search',
store: 'ContractStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ContractNumber',
text: 'Contract #'
},
{
xtype: 'datecolumn',
hidden: false,
dataIndex: 'LicenseDate',
text: 'License Date'
},
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.RowModel', {
}),
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: '+ New Contract',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
});
me.callParent(arguments);
},
});
View (panel)
Ext.define('MyApp.view.ContractPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.ContractPanel',
requires: [
'MyApp.view.ModuleTabs'
],
draggable: false,
height: 804,
id: 'contractpanel',
autoScroll: true,
layout: {
type: 'absolute'
},
manageHeight: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
border: 0,
height: 350,
itemId: 'ContractForm',
maxHeight: 400,
width: 1060,
layout: {
type: 'absolute'
},
bodyPadding: 10,
manageHeight: false,
items: [
{
xtype: 'panel',
border: 0,
height: 310,
margin: '',
minWidth: 450,
padding: '',
width: 480,
layout: {
type: 'absolute'
},
manageHeight: false,
items: [
{
xtype: 'textfield',
x: 0,
y: 0,
disabled: true,
margin: '',
padding: 5,
width: 236,
name: 'id',
fieldLabel: 'Contract ID',
labelWidth: 110
},
{
xtype: 'textfield',
x: 0,
y: 30,
margin: '',
padding: 5,
width: 236,
inputId: '',
name: 'ContractNumber',
fieldLabel: 'Contract Number',
labelWidth: 110
},
{
xtype: 'datefield',
x: 0,
y: 190,
padding: 5,
width: 210,
name: 'LicenseDate',
fieldLabel: 'License Date',
labelWidth: 110,
submitFormat: 'Y-d-m'
},
]
}
]
},
{
xtype: 'ModuleTabs',
id: 'ModuleTabs',
x: 0,
y: 360
}
]
});
me.callParent(arguments);
});
Store
Ext.define('MyApp.store.ContractStore', {
extend: 'Ext.data.Store',
alias: 'store.ContractStore',
requires: [
'MyApp.model.ContractModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
remoteFilter: true,
remoteSort: true,
storeId: 'contract',
model: 'MyApp.model.ContractModel',
buffered: true,
pageSize: 200,
listeners: {
write: {
fn: me.onStoreWrite,
scope: me
}
}
}, cfg)]);
}
});
Model
Ext.define('MyApp.model.ContractModel', {
extend: 'Ext.data.Model',
alias: 'model.ContractModel',
uses: [
'MyApp.model.ModuleModel'
],
idProperty: 'id',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'ContractNumber',
type: 'string'
},
{
name: 'LicenseDate',
type: 'date'
}
],
hasMany: {
model: 'MyApp.model.ModuleModel',
foreignKey: 'contract_id',
name: 'modules'
},
proxy: {
type: 'direct',
api: {
create: contract.createRecord,
read: contract.getResults,
update: contract.updateRecords,
destroy: contract.destroyRecord
},
reader: {
type: 'json',
root: 'data'
}
}
});

Answer 1

Your problem is that you don't specify a dateFormat on the model. Since you don't do this, it goes to the native JS Date.parse method to create the date. Some browsers are more lenient than others about what formats they accept.
For example, compare these in FF:
console.log(Date.parse('2012-01-01'));
console.log(Ext.Date.parse('2012-01-01', 'Y-m-d'));
Long story short, specify a dateFormat on the model so you're not leaving it up to the whims of the browser on how to parse the date.
From the docs:
Used when converting received data into a Date when the type is
specified as "date".
The format string is also used when serializing Date fields for use by
Writers.
A format string for the Ext.Date.parse function, or "timestamp" if the
value provided by the Reader is a UNIX timestamp, or "time" if the
value provided by the Reader is a javascript millisecond timestamp.
See Ext.Date.
It is quite important to note that while this config is optional, it
will default to using the base JavaScript Date object's parse function
if not specified, rather than Ext.Date.parse. This can cause
unexpected issues, especially when converting between timezones, or
when converting dates that do not have a timezone specified. The
behavior of the native Date.parse is implementation-specific, and
depending on the value of the date string, it might return the UTC
date or the local date. For this reason it is strongly recommended
that you always specify an explicit date format when parsing dates.

Answer 2

try using a date format to shape a date field in your model like this:
{name:'expectedCompleteBy', type:'date', mapping:'expectedCompleteBy', dateFormat:'Y-m-d'},
Also in your grid you can use format to display date field like this:
xtype:'datecolumn', format:'Y-m-d', dataIndex:'expectedCompleteBy'
XTemplate has special date function as well:
{expectedCompleteBy:date("Y-m-d")}
And in the form:
{ xtype:'datefield',
fieldLabel:'Need By Date',
name:'needByDate',
//submitFormat:'Y-m-d', defaults to format
format:'Y-m-d'
}
Date format API: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date