EXTJS 4 - htmleditor markInvalid issue - forms

Question

I'm using a htmleditor field in a form and want to see the red rectangle when I use markInvalid on the field but it seems to not work.
Here a code sample :
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function() {
// Working fine, as expected
var nameField = formPanel.getForm().findField('name');
nameField.markInvalid('Name invalid message');
// Not working
// (but the docs specify markInvalid should works)
var nameField2 = formPanel.getForm().findField('name2');
nameField2.markInvalid('Name invalid message');
// Not working either
//var nameField3 = Ext.getCmp('nameId2');
//nameField3.markInvalid('Name invalid message');
}
}]
});
When you click on the button, only the textfield appear in red.
The HTMLeditor doesn't appear red.
Am I missing something ?

Answer 1

This markInvalid function is empty for htmleditor in it's source file that's why is not working.
You need to first override this htmleditor and create markInvalid like below.
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
In this Fiddle, I have create a demo using HtmlEditor.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function (errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
height:500,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function (button) {
var form = button.up('form').getForm();
form.findField('name').markInvalid('Name invalid message');
form.findField('name2').markInvalid('Html editor invalid message');
}
}]
});
}
});
CSS
<style>
.x-form-invalid .x-html-editor-wrap {
background-color: white;
background-image: url(//cdn.sencha.com/ext/gpl/4.1.1/resources/themes/images/default/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-color: rgb(204, 51, 0);
}
</style>