Results 1 to 7 of 7

Thread: Adding required icon/* to mandatory fields.

  1. #1

    Default Answered: Adding required icon/* to mandatory fields.

    Hi,

    It might be a repeated question. but i am not finding a proper solution for this. I am using EXTJS 6. I want a proper way to add '*' to mandatory fields.

    I found the following code in fourm, but this will not work for conditionally required fields.

    Code:
    Ext.form.field.Base.override({            
          initComponent : function(){
                    if(this.allowBlank !== undefined && !this.allowBlank) {
                        if(!this.labelSeparator) {
                            this.labelSeparator = "";
                        }
                        this.labelSeparator = '<span style="color:red">*</span>'+this.labelSeparator;
                    }
                    this.callParent(arguments);
                }
            });

    Any solution to achieve this...

  2. I use a small override to add a CSS class and use CSS to add the asterisk:


  3. #2
    Sencha User
    Join Date
    Nov 2014
    Location
    Tunisia
    Posts
    18
    Answers
    1

    Default

    Hello,

    you can use this plugin below, it's very useful:
    1. Add this config to yours form panel defaults:
    defaults: {
    plugins: [{
    ptype: 'formlabelrequired'
    }]
    }
    2.After add allowBlank: false in desired field input of form.

    3. finally Add this plugins below to the ux folders, after y ou can do sencha app refresh.

    4 . Find Here the plugins:

    Ext.define('Ext.ux.plugin.form.LabelRequired', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.formlabelrequired',
    asterisk: ' <span class="fa fa-asterisk" style="color:red;" data-qtip="Required"></span>',
    constructor: function () {
    var me = this;
    me.callParent(arguments);
    },
    init: function (formPanel) {
    formPanel.on('beforerender', this.onBeforeRender, this);
    },

    onBeforeRender: function (formPanel) {
    var i, len, items, item;
    items = formPanel.query('[allowBlank=false]');
    for (i = 0, len = items.length; i < len; i++) {
    item = items[i];
    item.afterLabelTextTpl = (item.afterLabelTextTpl || "") + this.asterisk;
    }
    return true;
    }
    });


    Hope that it's help you.Have a good time

  4. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I use a small override to add a CSS class and use CSS to add the asterisk:

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #4
    Sencha User
    Join Date
    Nov 2014
    Location
    Tunisia
    Posts
    18
    Answers
    1

    Default

    Good work.

    Thank you for your useful tip

  6. #5

    Default

    Thanks Mitchellsimoens. Your solution is working fine for left align label. For top aligned it is causing some alignment issues. So i used labelSeparator to get * icon which is working fine.

    Code:
    Ext.define('Overrides.form.field.Base', {
                override: 'Ext.form.field.Base',
    
    
                getLabelableRenderData : function() {
                    var me            = this,
                        data          = me.callParent(),
                        labelSeparator = me.labelSeparator;
    
    
                    if (!me.allowBlank) {
                        data.labelSeparator = '<span style="color:red">*</span> '+labelSeparator;
                    }
    
    
                    return data;
                }
            });
    Thanks.

  7. #6

    Default

    @Mitchel: Great solution! Does that work with the validator "presence" when binding to models attributes in a form? (I guess no, but I prefer to ask)

    Thanks!

  8. #7
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    321
    Answers
    5

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I use a small override to add a CSS class and use CSS to add the asterisk:
    If the form fields have this property
    Code:
    labelAlign: 'right',
    the override put back
    Code:
    labelAlign: 'left',
    An other way i've found is to change the labelSeparator : https://stackoverflow.com/questions/45374305/how-to-mark-required-field-with-asterisk-in-ext-js-textfield-labels

    Don't forget to override HtmlEditor and CheckboxGroup, because they'are not derived from Ext.form.field.Base

Similar Threads

  1. Bug with mandatory fields in tabs : GXT 2.2.5 (build 2479)
    By APOLLO06 in forum Ext GWT: Bugs (2.x)
    Replies: 2
    Last Post: 20 Jul 2012, 1:34 AM
  2. mandatory fields
    By nmohan.025 in forum Ext 3.x: Help & Discussion
    Replies: 12
    Last Post: 24 Aug 2010, 3:52 AM
  3. How to add Icon for Required Fields in a form ?
    By pavanextjs in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 26 May 2010, 6:34 PM
  4. How to make form fields mandatory dynamically
    By mnakula in forum Sencha Ext JS Q&A
    Replies: 5
    Last Post: 19 May 2009, 11:49 AM
  5. Form submit on enter key but only when my all mandatory fields fillup
    By hiral in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Aug 2008, 3:37 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •