[ExtJS 4.1] Mark a red Asterisk/Star on an Required Fields

Making a red asterisk on required fields makes your user realize they are not allowed to be blank by intuition. In ExtJS, you can specify fields which cannot be blank such as the following code.

            items : [ {     
                xtype : 'textfield',    
                fieldLabel : 'Name',
                allowBlank : false,               
            }, {
                xtype : 'numberfield',
                fieldLabel : 'Age'                  
            } ]

I found a patch working fine on ExtJS 4.07 to realize this requirement.

Ext.override(Ext.layout.Layout, {
    renderItem: function(item, target, position) {
      if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) {
        item.fieldLabel += '<span class="req" style="color:red">*</span>';
      }
      this.callOverridden(arguments);
    }
});

Mark a red Asterisk on an Required Field on ExtJS 4.1

And I modify it a little bit to make it work in ExtJS 4.1 MVC application architecture as following.

this.control({
 'field' : {
  beforerender : function(thisField, eOpts) {
   if (thisField && !thisField.rendered && thisField.isFieldLabelable && thisField.fieldLabel && thisField.allowBlank == false) {
    thisField.fieldLabel += '<span class="req" style="color:red">*</span>';
   }
  }   
 }
});