I have a grid in extjs 7.2 with a store that is filtered by date. I have a start date and an end date, which are bound to date objects in my ViewModel. When the grid is initialized, the date for the first field (start_date) shows up in the field, but then the program throws a type error from the datefield.
Uncaught TypeError: j[d] is not a function
ExtJS 86 getErrors getErrors validateValue isValid validate onChange onChange checkChange setValue setValue setValue setValue onBindNotify notify react notify notify fireItemMutationEvent clip setViewSize onViewResize onViewRefresh pass createSingle fire doFireEvent doFireEvent doFireEvent fireEventArgs fireEvent onBoxReady afterFirstLayout afterFirstLayout afterComponentLayout afterComponentLayout notifyOwner callLayout flushLayouts runComplete k callParent runComplete run flushLayouts resumeLayouts resumeLayouts setActiveTab doActivateTab onClick fire fire publish publishDelegatedDomEvent doDelegatedEvent onDelegatedEvent addDelegatedListener subscribe addListener addListener doAddListener doAddListener addManagedListener addManagedListener a onRender onRender finishRender finishRenderItems finishRender finishRenderChildren afterRender finishRender finishRenderItems finishRender finishRenderChildren finishRenderChildren afterRender finishRender finishRenderItems finishRender finishRenderChildren afterRender finishRender render constructor ctor <anonymous> My Project ext-all.js:20:1539234 ExtJS 55 onDelegatedEvent self-hosted:935 ExtJS 31 <anonymous> My Project
Here is the js class for the grid with the binding:
Ext.define(K.maintenance.classes.grid, {
extend: K.shared.classes.groupedGrid,
controller: K.maintenance.aliases.controller,
viewModel: K.maintenance.aliases.viewmodel,
requires: ['Ext.data.validator.Date'],
xtype: K.maintenance.xtypes.grid,
bind: '{store}',
tbar: {
xtype:'toolbar',
items: [
{
reference: 'print',
iconCls:'icons-print',
},
'->','Start date : ',
{
xtype: 'datefield',
reference: 'start_date',
vtype: 'daterange',
format: 'Y-m-d',
bind: {
value: '{startDate}',
maxDate: '{endDate}'
},
validators: 'date'
},'-','Stop date : ',
{
xtype: 'datefield',
reference: 'stop_date',
vtype: 'daterange',
format: 'Y-m-d',
bind: {
value: '{endDate}',
minDate: '{startDate}'
},
validators: 'date'
}
]
},
columns: {...}
viewConfig: {
forceFit:true,
scrollToTop: Ext.emptyFn,
scrollOffset: 19,
stripeRows: true
},
stateful: false,
stateId: 'tool_maintenance_status',
animCollapse: false,
});
Any help figuring out why that error is thrown would be much appreciated.
Although that type of error can seem useless, it usually indicates something missing that ExtJS is expecting.
There is no vtype: daterange out of the box. Do you have a custom one you've implemented somewhere? If not, that could be culprit.
https://docs.sencha.com/extjs/7.2.0/classic/Ext.form.field.VTypes.html
Another possibility is that the validators: 'date' config isn't doing what you expect. I've always used a function for that config property. Datefields already have some validation built in, so using the basic date validator could be redundant if not handicapping you.