user3103742 user3103742 - 6 months ago 69
CSS Question

Extjs - Add warning image in a textfied dynamically when data vaildation fails using extjs

I am trying to change the background color and add a warning image within the textfield when the data validation fails. So far, I am able to change the background color but unable to insert a image in the textfield on the right side.

I am using Extjs 4.2.1. Here is my code:

Textfield whose background color needs to be changed and embed a warning image within:

{
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!' ",
},


Validator code that is being called:

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 custom class:

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


If I use fieldCls property for default condition it works fine, but I need to change it dynamically. I have tried lots of syntax but none of them working fine.

Answer

The following rule is the standard rule for the classic theme:

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

I would try to override these styles. Replace the line with your personnalized image. Add in your custom stylesheet something like:

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