Question

我在表单中使用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');
        }
    }]
});

单击按钮时，只有文本字段显示为红色。 HTMLeditor不会显示为红色。

我错过了什么吗？

Answer 1

markInvalid htmleditor这个source file函数为空FIDDLE，其中http://www.usb.org/developers/hidpage/Hut1_12v2.pdf为什么不起作用。

您需要先覆盖此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();
        }
    }
});

在 https://docs.microsoft.com/en-us/windows-hardware/design/component-guidelines/supporting-usages-in-multitouch-digitizer-drivers 中，我使用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>

EXTJS 4 - htmleditor markInvalid issue

1 个答案: