24

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

在 ExtJS3 中，我们可以通过以下方式轻松实现此 hack 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.

可悲的是，扩展Ext.form.Labelable或覆盖Ext.form.Labelable对我来说都不可行。扩展组件 fromExt.form.field.Base不会收到任何影响。即使我交换了 mixins，模板仍然无法工作。

所以这里是我的解决方案，我做了一个非常苛刻的覆盖Ext.form.field.Base，它的工作原理如下（查看我的示例）

这仅适用于 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);


})();

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

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

笔记

这背后的原因是因为我已经自定义了需要从基础Text, Combo,扩展的字段FieldContainer。扩展字段中的 Mixins 甚至不会与模板混淆。他们太固执了。也许目前最好的方法是重写 Base 类...查看工作示例

4

11 回答 11

28

我有一个更短的解决方案。我建议像这样使用表单的'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);
    }
});

这是演示

于 2011-11-03T17:09:11.050 回答
6

鉴于没有 fieldLayout，您仍然可以覆盖类似于 extjs3 bun 的布局组件，我已经覆盖了Ext.layout.Layout. 它与分子人的解决方案非常相似，但更通用。适用于表单以外的其他容器中使用的字段。

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);
    }
});

这比您的解决方案更简单，但不一定更好，这里的字段集中也使用了示例

于 2011-11-03T17:52:54.833 回答
5

您也可以不覆盖和扩展任何内容，只需创建一个控制器操作，如下所示：

Ext.define('MyApp.controller.MyForm', {
    extend: 'Ext.app.Controller',

    markMandatoryFields: function(field, options) {
        if (field && field.isFieldLabelable && field.fieldLabel && field.allowBlank == false) {
            field.fieldLabel += ' <span class="req" style="color:red">*</span>';
        }
    },

    init: function() {
        this.control({
            "field": {
                beforerender: this.markMandatoryFields
            }
        });
    }
});
于 2012-05-15T09:57:23.537 回答
5

对于Ext JS 4.1.1这有效：

Ext.define('com.ideas.widgets.Base', {
    override : 'Ext.form.field.Base',
    initComponent : function()
    {
        if(this.allowBlank!==undefined && !this.allowBlank)
        {
            if(!this.labelSeparator)
            {
                this.labelSeparator = "";
            }
            this.labelSeparator += '<span style="color:red">*</span>';
        }
        this.callParent(arguments);
    }
});
于 2012-09-10T07:02:57.267 回答
4

Extjs 4.1

当字段有 fieldLabel 时，使用：

fieldLabel: 'Name',
allowBlank: false,    
afterLabelTextTpl: "<span style="color:red;font-weight:bold" data-qtip="Required">*</span>"

如果该字段没有 fieldLabel 使用配置选项的组合，则 hideLabel 配置必须为 false：

//hideLabel: false
name: 'lastName',
emptyText: "Last Name",
allowBlank: false,    
labelWidth: 0,
fieldLabel: '',
hideEmptyLabel: false,
afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'

此外，您可以将此解决方案与 Drasill 插件混合使用，以便一次自定义所有字段。

于 2013-11-26T19:10:12.450 回答
4

您可能会发现更优雅的一种方法是将 css 类添加到任何用allowBlank=falseCSS 中的强制指示符标记并设置样式的字段标签。

Ext.define('Ext.ux.form', {

    extend: 'Ext.form.Panel',

    listeners: {
        'beforeadd': function(){
            if (!field.allowBlank) {
                field.labelClsExtra = 'x-required';
            }
        }
    }

});

然后，您可以使用:after伪实用程序在 CSS 中设置字段标签的样式：

.x-required:after {
    content: ' *';
    color: red;
    font-weight: bold;
}
于 2014-05-02T00:17:22.380 回答
2

我为此做了一个插件。

工作这个 ExtJS 4.1（至少）。

像这样使用：

Ext.create('Ext.form.Panel', {
  ...
  plugins : "formlabelrequired"
  ...
});

或者，要自定义“星号”：

Ext.create('Ext.form.Panel', {
  ...
  plugins : [{ptype:"formlabelrequired", asterisk:" (mandatory)"}]
  ...
});

这是插件的代码：

/**
 * Plugin (ptype = 'formlabelrequired') that adds "asterisk" to labels
 * for Fields with "allowBlank: false".
 */
Ext.define('Ext.ux.plugin.form.LabelRequired', {

        extend: 'Ext.AbstractPlugin',

        alias: 'plugin.formlabelrequired',

        asterisk: ' <span class="required"> *</span>',

        constructor: function() {

            this.callParent(arguments);

        },

        init: function(formPanel) {
            formPanel.on('beforerender', this.onBeforeRender, this);
        },

        /**
         * @private
         * Adds asterisk to labels.
         */
        onBeforeRender: function(formPanel) {

            var i, len, items;

            items = formPanel.query('[allowBlank=false]');

            for (i = 0, len = items.length; i < len; i++) {
                item = items[i];
                item.afterLabelTextTpl = (item.afterLabelTextTpl || "") + this.asterisk;
            }

            return true;

        }

    });
于 2013-01-17T16:14:13.070 回答
1

实际上，我认为使用fieldSubTpl和/或labelableRenderTpl添加 * 是比使用事件侦听器更清洁的方法。事件可以停止，监听器可以分离。

我认为 OP(Lionel Chan) 担心的是使用 Ext.override 有点笨拙，他是 100% 正确的。但是，如果我们在表单配置级别传递自定义 tpl，那就还不错：

Ext.create('Ext.form.Panel',{
    defaults:{
        fieldSubTpl:['<input id="{id}" type="{type}" ', 
        '<tpl if="name">name="{name}" </tpl>', 
        '<tpl if="size">size="{size}" </tpl>', 
        '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
        'class="{fieldCls} {typeCls}" autocomplete="off" />',
        '<span>',
        '<tpl if="allowBlank==false">*</tpl>',
        '</span>',
        {
            compiled: true, 
            disableFormats: true
    }]},
    items : [{
        xtype : 'textfield',.....

tpl可能有问题，我没试过。

于 2011-11-06T05:04:17.743 回答
1

如果您不想覆盖任何内容，请将星号放在 labelSeparator 中：

{
  xtype: 'textfield',
  fieldLabel: 'Name',
  name: 'requestor_name',
  allowBlank: false,
  labelSeparator : ': <span style="color:red">*</span>'
}
于 2014-06-19T01:59:48.063 回答
0

如果您希望为字段标签显示红色 *，我们可以使用 fieldlabel 来执行此操作。

例如，下面的代码创建带有标签名称“名称”的新文本字段，并显示红色星号

var name = new Ext.form.TextField({
    fieldLabel : 'Label<span style=\"color:red;\" ext:qtip=\"This field is required\"> *</span>',
    name : 'name',
    id: 'Name',
    maxLength : 40,
    width : 205,
    allowBlank : false
});
于 2014-06-18T05:40:31.247 回答
0

他们有很多方法可以做到这一点，而您在上面可以找到的方法很少，我的建议是：

 {
    xtype : 'label',
    html:'<span>First Name</span><span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
    width:50,
 }

只需将星号和标签文本都放在单个 html 属性中。

于 2015-10-29T10:26:12.947 回答