EXTJS 4 - htmleditor markInvalid issue

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>