EXTJS 4 - ошибка htmleditor markInvalid - PullRequest
Новая
       14

EXTJS 4 - ошибка htmleditor markInvalid

0 голосов
/ 05 июня 2018

Я использую поле htmleditor в форме и хочу видеть красный прямоугольник, когда я использую markInvalid для поля, но, похоже, он не работает.

Вот пример кода: 

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');
        }
    }]
});

При нажатии на кнопку только текстовое поле отображается красным.HTML-редактор не отображается красным.

Я что-то упустил?

1 Ответ

0 голосов
/ 05 июня 2018

Эта markInvalid функция пуста для htmleditor в source file, поэтому она не работает.

Высначала нужно переопределить htmleditor и создать markInvalid, как показано ниже. 

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

В этой скрипке , я создал демо, используя HtmlEditor.

Фрагмент кода: 

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