Databases
StackOverflow2013
Postsdbo
POExtJS 4 - Mark a red asterisk on an required field
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtJS 4 - Mark a red asterisk on an required field
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload