extjs - 为字段标签添加颜色

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