添加颜色到fieldlabel [英] Add color to fieldlabel

问题描述

我想在fieldlabel后放一个红色的星号，以表示用户必须填写该字段。有没有办法在js代码中直接添加CSS代码？像参数样式一样，但仅适用于星号

I would like to put a red asterisk after a fieldlabel in order to say the user must fill the field. Is there a way to add directly css code in the js code? Like the parameter style for example but only for the asterisk

var blablaField  = new Ext.form.TextField({
fieldLabel : 'Name *',
allowBlank : false,
width : 300
});

推荐答案

您至少有三（IMO）存档这个：

You have at least three (IMO) clean ways to archive this:

要做到这一点，自动为任何不允许空白的字段执行，您应该使用这样的自定义表单扩展。

To do it automatically do it for any field that didn't allow blank you should use a custom form extension like this.

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

如果您只想在一个字段中执行此操作，您可以使用 afterLabelTextTpl 或 afterLabelTpl 配置属性，并应用如

If you just want to do it for one field you can use the afterLabelTextTpl or the afterLabelTpl config property and apply something like

<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>

或者您可以直接将其添加到标签文本中，如

Or you can add it directly to the label-text like

fieldLabel : 'Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'

第一个是我最喜欢的，因为你不需要什么额外的期望设置所需的标志。

Where the first is the one I like most because you need to do nothing extra expect setting the required flag.

修改

如果你不要申请asterix到任何不允许空白的字段，当它被添加到窗体中时，您可能会引入新的属性，如 skipLabelAppendix 。您可以将此属性设置为任何不应该在标签后面附加asterix的字段。并且不要忘记将它包含到这样的形式中

If you don't wan't to apply the asterix to any field that does not allow blank when it get's added to the form you may introduce a new property like skipLabelAppendix. You may set this property to any field that should not get the asterix appended after the label. And don't forget to include it into the form like so

me.on('beforeadd', function(form, field){
    if (!field.allowBlank && !field.skipLabelAppendix)
       field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
      });

这篇关于添加颜色到fieldlabel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！