css - Extjs - 当使用 extjs 进行数据验证失败时，在文本字段中动态添加警告图像

Question

当数据验证失败时，我正在尝试更改背景颜色并在文本字段中添加警告图像。到目前为止，我可以更改背景颜色，但无法在右侧的文本字段中插入图像。

我正在使用 Extjs 4.2.1。这是我的代码:

需要更改背景颜色并在其中嵌入警告图像的文本框:

{
        fieldLabel: 'First Name',
        afterLabelTextTpl: required,
            name: 'first',
            id: 'first1',                   
            //allowBlank: false,
            //fieldCls: 'varun',
            //emptyText: 'placeholder text',
            vtype: 'time1',
            inputAttrTpl: " data-qtip='Enter your first name!' ",
},

被调用的验证器代码:

Ext.apply(Ext.form.field.VTypes, {
    //  vtype validation function
    time1: function(val, field) {
            //alert(val);
            //field.setFieldStyle('background-color: white;');
            alert("1");
            //var val = this.findField('first').getValue;
            alert(val);
            alert("2");
            if(val == 'O')  {
                //alert("hell");
                //field.addClass('varun');
                //field.invalidClass('x-form-invalid');
                //field.setFieldStyle('background-color: green;');
                //field.getEl().setStyle('background', 'red');
                //getInputEl().gettyle().addCls('varun');
                alert("1");
                //textfield.removeCls('x-form-display-field');
                //field.getInputEl('first1').addCls('varun');
                //field.getInputEl('first').replaceCls('varun');
                field.getCmp('first').replaceCls('varun');
                //field.inputEl.replaceCls('varun');
                //field.addStyleName('varun');
                //Ext.getCmp('first1').addClass('varun');
                //field.getEl().style.backgroundColor = 'red';
                alert("2");
                //field.setFieldStyle('varun');
                //field.applyStyles('varun');
                return true;
            }
        //return true;  
    },
    // vtype Text property: The error text to display when the validation function returns false
    time1Text: 'Not a valid time.  Must be in the format "12:34 PM".',
    // vtype Mask property: The keystroke filter mask
    time1Mask: /[\d\s:amp]/i
});

CSS 自定义类:

.varun {
background:url(warning.gif);
background-size:16px 16px;
background-repeat: no-repeat;
background-position: right center;
background-color:green;
}

如果我将 fieldCls 属性用于默认条件，它工作正常，但我需要动态更改它。我尝试了很多语法，但没有一个工作正常。

Answer 1

以下规则是经典主题的标准规则:

.x-form-type-text textarea.x-form-invalid-field, .x-form-type-text input.x-form-invalid-field, .x-form-type-password textarea.x-form-invalid-field, .x-form-type-password input.x-form-invalid-field, .x-form-type-number textarea.x-form-invalid-field, .x-form-type-number input.x-form-invalid-field, .x-form-type-email textarea.x-form-invalid-field, .x-form-type-email input.x-form-invalid-field, .x-form-type-search textarea.x-form-invalid-field, .x-form-type-search input.x-form-invalid-field, .x-form-type-tel textarea.x-form-invalid-field, .x-form-type-tel input.x-form-invalid-field {
    background-color: white;
    background-image: url(images/grid/invalid_line.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    border-color: #c30;
}

我会尝试覆盖这些样式。用您的个性化图像替换该行。在您的自定义样式表中添加如下内容:

.x-form-type-text input.x-form-invalid-field {
    background-color: #ffdddd;
    background-image: url(cross.gif);
    background-repeat: no-repeat;
    background-position: right;
}