ExtJS4：如何在文本框、组合框等旁边显示验证错误消息

Question

我需要实现验证消息，出现在无效字段旁边。希望得到帮助。

- berliner

---

这是直接从示例中提取的内容。最好通过它们进行学习。 - dbrin

@DmitryB，感谢您的回复。您能给我提供一些例子吗？请阅读我在下面对JohnnyHK的评论。 - berliner

我收回我的评论。直接显示完整的错误消息的唯一方法是使用“under”msgTarget - 请参见此示例中的Phone字段：http://docs.sencha.com/ext-js/4-1/#!/example/form/fieldcontainer.html @Jomet在下面提到了元素ID，这需要更多的工作，但这就是你必须做的。 - dbrin

Answer 1

msgTarget: 'side'表示将在字段右侧添加一个错误图标，在悬停时以弹出窗口显示消息。

如果您仔细阅读文档，还有一个选项可用于 msgTargethttp://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[element id] 将错误消息直接添加到指定元素的 innerHTML 中。 您必须动态地向控件右侧添加一个带有 id 的 "td"。然后，如果指定 msgTarget: 'element id'，它将起作用。

- Jom

Answer 2

msgTarget: 'elementId' 可以使用，但似乎非常有限，特别是当您想要一个可重用的 ExtJs 组件的多个实例（因此具有相同的 msgTarget 元素的多个实例）时。例如，我有一个 MDI 样式的编辑器，您可以在选项卡界面中打开一个类型的多个编辑器。它也似乎不能与 itemId 一起使用或识别 DOM/容器层次结构。

因此，如果我不想要内置消息显示选项中的准确一个，我更喜欢通过设置 msgTarget: none 来关闭默认处理，然后通过处理 fielderrorchange 事件来执行自己的消息显示，该事件专为此场景设计。在这种情况下，我现在可以尊重我的表单层次结构，即使有多个相同的编辑器表单实例，因为我可以选择相对于编辑器的错误显示元素。

以下是我的做法：

{
    xtype: 'fieldcontainer',
    fieldLabel: 'My Field Label',
    layout: 'hbox',   // this will be container with 2 elements: the editor & the error
    items: [{
        xtype: 'numberfield',
        itemId: 'myDataFieldName',
        name: 'myDataFieldName',
        width: 150,
        msgTarget: 'none',  // don't use the default built in error message display
        validator: function (value) {
            return 'This is my custom validation message. All real validation logic removed for example clarity.';
        }
    }, {
        xtype: 'label',
        itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
        cls: 'errorBox'     // This class lets me customize the appearance of the error element in CSS
    }],
    listeners: {
        'fielderrorchange': function (container, field, error, eOpts) {
            var errUI = container.down('#errorBox');
            if (error) {
                // show error element, don't esape any HTML formatting provided
                errUI.setText(error, false);
                errUI.show();
            } else {
                // hide error element
                errUI.hide();
            }
        }
    }
}

- BenSwayne

Answer 3

请查看控件的msgTarget配置。将msgTarget: 'side'设置为控件右侧将显示验证消息。

- JohnnyHK

---

谢谢回复，但是这个选项只是将感叹号图标放在控件的右侧，而不是显示消息。我需要消息出现，而不是作为图标的工具提示。 - berliner

Answer 4

在右侧进行验证时，请使用msgTarget 'side'，在底部进行验证时，请使用msgTarget 'under'

     items: [{
                xtype: 'textfield',
                fieldLabel: 'Name',
                allowBlank: false,
                name: 'name',
                msgTarget: 'side',
                blankText: 'This should not be blank!'
            }]

- php

Answer 5

您可以使用“msgTarget：[元素ID]”。为了使用元素ID而不是itemId，您必须编写HTML。验证函数会在您设置为“msgTarget”的元素下添加一个列表元素。 如果您想显示要用于验证的元素，您可以传递HTML而不仅仅是文本。

{
    xtype: 'container',
    items: [
        {
            xtype: 'textfield',
            allowBlank: false,
            msgTarget: 'hoge'
            blankText: '<div style="color:red;">validation message</div>', // optional
        },
        {
            xtype: 'box',
            html: '<div id="hoge"></div>' // this id has to be same as msgTarget
        }
    ]
}

- Kohei Mikami

Answer 6

为了在输入框下方显示错误信息，只有在使用表单布局的情况下，msgTarget属性才会起作用。

如果不是表单布局，我们需要将元素包装在“x-form-field-wrap”类中才能解决这个问题。

您可以在以下线程中找到更多信息： https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem

- ganesh phirke