Extjs 向fieldlabel添加颜色

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

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

您至少有三种（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);
    }
});

---

您可能会发现一种更优雅的方法是将css类添加到任何标记为

allowBlank=false

的字段标签中，并在css中设置强制指示符的样式

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

    extend: 'Ext.form.Panel',

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

});

然后，您可以在CSS中使用

：after

伪实用程序设置字段标签的样式：

.x-required:after {
    content: ' *';
    color: red;
    font-weight: bold;
}

---

如果你不想把这个应用到你的表单中的Apple空白的每一个字段中，请考虑把它变成一个可以按字段添加的插件。您仍然可以灵活地使用表单默认值，但如果您只在特定的必填字段中使用表单默认值，则不需要它。@ExistDiscover Well在我为其创建插件时没有任何好处，因为我必须将其添加到所有字段中。这可能取决于我的个人风格，因为这是完全有效的，我可能会在这里监督一些事情。无论如何，我更建议在允许跳过asterix附录的字段上引入一个新属性。见我的编辑。同意。我并不是说它比像你那样添加到表单本身更有益。只是另一种选择。使用插件的一个好处是，对于不一定以表单形式存在的字段，例如工具栏中的项目。与其简单地检查“if（！field.allowBlank）”，不如使用：：if（typeof field.allowBlank！='undefined'&&！field.allowBlank）这将确保没有选择和标记allowBlank属性的字段。@RoshanKhandelwal

allowBlank

的默认值为

true

。如果您的

未定义

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

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

    extend: 'Ext.form.Panel',

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

});

.x-required:after {
    content: ' *';
    color: red;
    font-weight: bold;
}