Question

我想在fieldlabel后面加一个红色星号，以便说用户必须填写该字段。有没有办法在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 配置属性并应用< / p>

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

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

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

第一个是我最喜欢的那个，因为你不需要做任何额外的事情来设置所需的标志。

修改

如果你不想将asterix应用到任何不允许空白的字段，当它被添加到表单时，你可能会引入一个新的属性，如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=false的任何字段标签，并在CSS中设置您的强制指示符。

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

为fieldlabel添加颜色

2 个答案: