What causes circled ! in Sencha ExtJS Example? - extjs

Question

I'm trying to mimic the behavior of the Sencha ExtJS example at this URL:
http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#form-contact
Specifically, they show the code but I don't see any place that cause the circled red exclamation point to be drawn whent he field is required.
I'm also wondering if there is a better way to get the red "*" after each field label. It looks like they repeat the code on every field definition which feels like an anti-pattern to me.
***UPDATE
Per #CD, this is how to get the red icon
defaults: {
anchor: '100%',
labelStyle: 'font-weight:bold;padding:0;',
msgTarget: 'side'
},

Answer 1

For the error icon have a look at msgTarget: 'side':
The location where the error message text should display. Must be one
of the following values:
qtip Display a quick tip containing the message when the user hovers
over the field. This is the default.
Ext.tip.QuickTipManager.init must have been called for this setting to
work.
title Display the message in a default browser title attribute popup.
under Add a block div beneath the field containing the error message.
side Add an error icon to the right of the field, displaying the message in a popup on hover.
none Don't display any error message. This might be useful if you are implementing custom error display.
[element id] Add the error message directly to the innerHTML of the specified element.
For adding the red "*" try this override:
Ext.define('Overrides.form.field.Base', {
override: 'Ext.form.field.Base',
initLabelable: function () {
this.callParent(arguments);
if (!this.allowBlank) {
this.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
}
}
});