What causes circled ! in Sencha ExtJS Example?

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'
        },

For the DRY pattern, I would recommend a look at the [`defaults`](http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.container.Container-cfg-defaults) config. — Alexander, Apr 18 '16 at 17:04
The error icon is caused by `allowBlank: false`, which makes [`getErrors`](http://docs.sencha.com/extjs/6.0/6.0.1-classic/source/Text.html#Ext-form-field-Text-method-getErrors) method disallow empty fields. — Alexander, Apr 18 '16 at 17:14

CD.. · Accepted Answer · 2016-04-18T18:41:46.780

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>';
        }
    }

});

edited Apr 18 '16 at 18:41

answered Apr 18 '16 at 17:02

CD..

72,281
25
154
163

1

Thanks @CD I know we are not suppose to say thank you on SO but I really want to let you know how much I appreciate your posts on my questions. – Peter Kellner Apr 18 '16 at 17:10
I'm curious why you removed the link to the other post. Is it broken @CD ? – Peter Kellner Apr 18 '16 at 17:27
Also @CD, will the define replace the code in all places or just the form on on? – Peter Kellner Apr 18 '16 at 17:28
@PeterKellner: it was an Extjs4 question: http://stackoverflow.com/a/7999017 & the override will affect all fields. – CD.. Apr 18 '16 at 17:29
I'm not seeing the "side" attribute in quicktipmanager. http://docs.sencha.com/extjs/6.0/6.0.2-classic/#!/api/Ext.tip.QuickTipManager – Peter Kellner Apr 18 '16 at 18:40
Have a look at the [`Labelable`](http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.form.Labelable-cfg-msgTarget) documentation. – CD.. Apr 18 '16 at 18:42

What causes circled ! in Sencha ExtJS Example?

1 Answers1