forms - ExtJS 4 - 在必填字段上标记一个红色星号

Question

我有这个问题，我需要在 fieldLabel 旁边添加一个红色星号当字段被标记为“必填”(或 allowBlank: false)

在 ExtJS3 中，我们可以通过覆盖 Ext.layout.FormLayout 轻松地进行此破解。如下:

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 += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
        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'
        };
    }
});

但这在 ExtJS4 中是不可能的。 FormLayout不再适用，标签实际上是由 Ext.form.field.Base 渲染的通过使用名为 Ext.form.Labelable 的 mixins .

可悲的是，没有扩展 Ext.form.Labelable或覆盖 Ext.form.Labelable对我来说是可行的。来自 Ext.form.field.Base 的扩展组件不会受到任何影响。即使我交换了 mixin，模板仍然不起作用。

所以我的解决方案来了，我对 Ext.form.field.Base 做了一个非常严厉的覆盖。 ，它的工作原理如下( Check out my example )

这仅适用于 ExtJS 4.0.7。要在 ExtJS 4.0.2a 上使用它，您需要修改 labelableRenderTpl根据 4.0.2a /src/form/Labelable.js 中发现的

(function() {

    var overrides =  {
        labelableRenderTpl: [
            '<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
                '<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                    '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                    '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                    '<tpl if="!allowBlank"><span style="color:red">*</span></tpl>',
                '</label>',
            '</tpl>',
            '<div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation">{subTplMarkup}</div>',
            '<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
            '<div class="{clearCls}" role="presentation"><!-- --></div>',
            {
                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);


})();

所以我在所有必填字段中添加了漂亮的星号。

问题是，有没有更简单的方法来实现这样的目标？覆盖非常苛刻，最好我们可以使用 mixin，但是 mixin 不能覆盖行为

备注

这背后的原因是因为我自定义了需要从基础 Text 扩展的字段。 , Combo , FieldContainer . Mixins in the extended field doesn't even mess with the template .他们只是太固执了。也许现在最好的方法是覆盖基类... Check out the working example

Answer 1

我有一个更短的解决方案。我建议像这样使用表单的 'beforeadd' 事件:

Ext.define('Ext.ux.form', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
      this.on('beforeadd', function(me, field){
        if (!field.allowBlank)
          field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
      });
      this.callParent(arguments);
    }
});

这是 demo