ExtJS how to create a custom field from a custom component - extjs

Question

I have my application (ExtJS 4.2.1) and I have a form:
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: {
msgTarget: 'side',
xtype: 'textfield'
},
//layout:'anchor',
items: [{
xtype: 'combobox',
itemId: 'cboEmployer',
store: Ext.create('App.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: false,
},{
xtype: 'radiogroup',
fieldLabel: 'Type',
name: 'RequestInAdvance',
columns: 2,
items: [{
boxLabel: 'Normal',
name: 'RequestInAdvance',
inputValue: 0,
checked: true
}, {
boxLabel: 'Advanced',
name: 'RequestInAdvance',
inputValue: 1
}
]
}, {
xtype: 'fieldset',
title: 'Date selection',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'hbox',
defaultMargins: {
top: 0,
right: 5,
bottom: 0,
left: 0
}
}
},
items: [{
xtype: 'highlightdate', // <- This is a custom datepicker but I need it to be a field type
name: 'SelectedDates',
itemId: 'datePicker'
}],
},
],
buttons: [{
text: 'Save',
action: 'commit',
glyph: Glyphs.SAVE,
disabled: true
}],
xtype: 'highlightdate' is a custom datepicker and I need to do custom form Validation so I can mark the element as error:
In my validation method I have:
var fieldMatch = Ext.ComponentQuery.query('field[name=' + error.field + ']');
if (fieldMatch.length) {
// add extra validaiton message to the offending field
fieldMatch[0].markInvalid(error.message);
}
So when I try to set an error to my highlightdate xtype It can be found becuase is not a field.
Is there a way to workaround this?

Answer 1

xtype is just a shortname for your custom 'highlightdate' class and can be replaced by the new Namespace.CustomClass({cfg}) notation. What you need to figure out is: what base class does this custom class extend? If it extends Ext.form.field.Base or Ext.form.field.Text for ex. than it's also a field and inherits all the properties from it.