Mark Required Fields in a ExtJS Form

I just had the requirement to mark required fields in a ExtJS form. I started with the code from Jason (Thanks!) and extended it a bit.
Now you may customize how the field marker would look like by assigning a CSS class to a requiredFieldCls property. I also added a descriptive tooltip for the marker.
Here’s the code:

Dont’ forget to also include these necessary modifications to Ext.layout.FormLayout:

From know on you can find this code and all my other ExTJS components bundled in a library called ‘extensive’ – hosted at Google Code. Feel free to support the project by participating.

  • dk

    Hi Mark,

    Nice article, it looks like a good way to augment the existing libs to automatically apply the markup.

    I’ve achieved much the same effect by placing some extra markup in the label like so:
    ‘Label text *

    Then all I have to do is add the following to my stylesheet:

    .x-form-item-label em {
    color: red;

    I tend to prefer this as it cuts down on the amount of extra code that has to be downloaded and processed. Of course, I don’t automatically get the little note at the bottom of the script like yours does.



  • Victoria

    Hi, just what I was looking for. Thanks

  • Bruce

    Hi Mark,

    This piece of code really helped me out heaps – thanks. I used your core code to extend the form layout and created a new layout called formplus. I can now selectively apply this new layout to my RW forms.

    Also, I Found a slight bug in the RequiredFieldInfo component.

    ((this.requiredFieldCls !== undefined) ? ‘class=”‘ + this.requiredFieldCls + ‘”‘ : ‘style=”color:red;”‘) +
    ‘>* ‘ +
    ((this.requiredFieldText !== undefined) ? this.requiredFieldText : ‘Required field’)
    }, config))

    config hasn’t been applied to ‘this’ at this point so this.requiredFieldCls & this.requiredFieldText are always undefined even if set in the parent.

    Replace ‘this’ with ‘config’ and it seems to work ok,

    ((config.requiredFieldCls !== undefined) ? ‘class=”‘ + config.requiredFieldCls + ‘”‘ : ‘style=”color:red;”‘) +
    ‘>* ‘ +
    ((config.requiredFieldText !== undefined) ? config.requiredFieldText : ‘Required field’)
    }, config))



  • ana

    Thank you!! This is exactly what I was looking for. Again, thanks!

  • Ravi Gupta

    But it is failed for check box.
    I have some check box in my form and these are not mandatory but ‘*’ mark is displaying. :(

    How can we check the type of a component ?

    like c.type it is undefined

    i want if it is a check box then i will check is it requiredField is true or not else write the same code
    because checkbox and radio component does not have allow blank property

  • Ravi Gupta

    Why we have used this !c.rendered?
    I do not think so it is necessary

  • Madhatter1979

    @Ravi – I just added a check to see if the allowBlank property is defined. That way, the code in the if block is only executed if you’ve explicitly set the allowBlank property and it is true.

  • crd

    @Dave : ‘Label text *‘ where should i put this?

  • crd

    I have an application with 2 tabs.Each tab has a form and a search button which when clicked displays the grid below the form.What happens is When i click reset on tab2, tab1 search stops working in a way it fetches the data but the grid is not shown anymore.Any clue.