extjs datefield browser not showing up
https://stackoverflow.com/questions/13019957
-
13-07-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
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'
}
}
});
解决方案
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.
其他提示
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
