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

Answer 2

您可能会发现更优雅的一种方法是将 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;
}