为字段标签添加颜色

Question

我想在字段标签后放置一个红色星号，以表明用户必须填写该字段。有没有办法在js代码中直接添加css代码？例如，类似于参数样式，但仅适用于星号

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

Answer 1

您至少有三种（IMO）干净的方法来存档此内容：

要自动对任何不允许空白的字段执行此操作，您应该使用像这样的自定义表单扩展。

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配置属性并应用类似的内容

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

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

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

其中第一个是我最喜欢的，因为除了设置所需的标志之外，您不需要做任何额外的事情。

编辑

如果您不想将星号应用于任何在添加到表单时不允许空白的字段，您可以引入一个新属性，例如skipLabelAppendix. 您可以将此属性设置为任何不应在标签后附加星号的字段。并且不要忘记将其包含在表格中，如下所示

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