title: ExtJS 4 - Mark a red asterisk on an required field
body: <p>I have this problem where I need to add a red asterisk beside a <code>fieldLabel</code> when a field is marked as "required" (or <code>allowBlank: false</code>)</p>
  
  <p>In ExtJS3, we can have this hack easily by overriding <code>Ext.layout.FormLayout</code> as follow:</p>
  
  <pre><code>Ext.override(Ext.layout.FormLayout, {
      getTemplateArgs: function(field) {
          var noLabelSep = !field.fieldLabel || field.hideLabel;
          var labelSep = (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator);
          if (!field.allowBlank) labelSep += '&lt;span style="color: rgb(255, 0, 0); padding-left: 2px;"&gt;*&lt;/span&gt;';
          return {
              id: field.id,
              label: field.fieldLabel,
              labelStyle: field.labelStyle||this.labelStyle||'',
              elementStyle: this.elementStyle||'',
              labelSeparator: noLabelSep ? '' : labelSep,
              itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
              clearCls: field.clearCls || 'x-form-clear-left'
          };
      }
  });
  </code></pre>
  
  <p>But this is impossible in ExtJS4. <code>FormLayout</code> is no longer applicable, and labels are in fact rendered by <code>Ext.form.field.Base</code> by using a mixins called <code>Ext.form.Labelable</code>.</p>
  
  <p>Sadly, neither extending the <code>Ext.form.Labelable</code> or overriding <code>Ext.form.Labelable</code> is workable for me. The extended components from <code>Ext.form.field.Base</code> does not receive any effect from it. Even if I swapped the mixins, the templates still would not work.</p>
  
  <p>So here come my solution, where I did a very harsh override over <code>Ext.form.field.Base</code>, and it works as follow (<a href="http://jsfiddle.net/chaoszcat/Rrv5H/5/">Check out my example</a>)</p>
  
  <p><em>This is for ExtJS 4.0.7 only. To use it on ExtJS 4.0.2a you need to modify the <code>labelableRenderTpl</code> according to the one found in 4.0.2a <code>/src/form/Labelable.js</code></em></p>
  
  <pre><code>(function() {
  
      var overrides =  {
          labelableRenderTpl: [
              '&lt;tpl if="!hideLabel &amp;&amp; !(!fieldLabel &amp;&amp; hideEmptyLabel)"&gt;',
                  '&lt;label id="{id}-labelEl"&lt;tpl if="inputId"&gt; for="{inputId}"&lt;/tpl&gt; class="{labelCls}"',
                      '&lt;tpl if="labelStyle"&gt; style="{labelStyle}"&lt;/tpl&gt;&gt;',
                      '&lt;tpl if="fieldLabel"&gt;{fieldLabel}{labelSeparator}&lt;/tpl&gt;',
                      '&lt;tpl if="!allowBlank"&gt;&lt;span style="color:red"&gt;*&lt;/span&gt;&lt;/tpl&gt;',
                  '&lt;/label&gt;',
              '&lt;/tpl&gt;',
              '&lt;div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation"&gt;{subTplMarkup}&lt;/div&gt;',
              '&lt;div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"&gt;&lt;/div&gt;',
              '&lt;div class="{clearCls}" role="presentation"&gt;&lt;!-- --&gt;&lt;/div&gt;',
              {
                  compiled: true,
                  disableFormats: true
              }
          ],
  
          /**
           * @protected
           * Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
           * @return {Object} The template arguments
           */
          getLabelableRenderData: function() {
              var me = this,
                  labelAlign = me.labelAlign,
                  labelCls = me.labelCls,
                  labelClsExtra = me.labelClsExtra,
                  labelPad = me.labelPad,
                  labelStyle;
  
              // Calculate label styles up front rather than in the Field layout for speed; this
              // is safe because label alignment/width/pad are not expected to change.
              if (labelAlign === 'top') {
                  labelStyle = 'margin-bottom:' + labelPad + 'px;';
              } else {
                  labelStyle = 'margin-right:' + labelPad + 'px;';
                  // Add the width for border-box browsers; will be set by the Field layout for content-box
                  if (Ext.isBorderBox) {
                      labelStyle += 'width:' + me.labelWidth + 'px;';
                  }
              }
  
              return Ext.copyTo(
                  {
                      inputId: me.getInputId(),
                      fieldLabel: me.getFieldLabel(),
                      labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls,
                      labelStyle: labelStyle + (me.labelStyle || ''),
                      subTplMarkup: me.getSubTplMarkup(),
                      allowBlank: me.allowBlank
                  },
                  me,
                  'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
                  true
              );
          }
      };
  
  
      //Both field.Base and FieldContainer are affected, so need to cater for.
      Ext.override(Ext.form.field.Base, overrides);
      Ext.override(Ext.form.FieldContainer, overrides);
  
  
  })();
  </code></pre>
  
  <p>And so I have the nice asterisk added to all the required fields.</p>
  
  <p><strong>Question is, is there any easier way to achieve something like this? Overriding is pretty harsh, best if we can use mixins, but mixins cannot override the behavior</strong></p>
  
  <p><strong>Note</strong></p>
  
  <p>The reason behind this is because I have customized fields that needed to be extended from the base <code>Text</code>, <code>Combo</code>, <code>FieldContainer</code>. <a href="http://jsfiddle.net/chaoszcat/t9RCr/1/">Mixins in the extended field doesn't even mess with the template</a>. They are just too stubborn. Perhaps the best way for now is by overriding the Base class... <a href="http://jsfiddle.net/chaoszcat/Rrv5H/5/">Check out the working example</a></p>