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

我需要实现出现在无效字段旁边的验证消息。任何帮助都将不胜感激。

请参阅控件的配置

msgTarget:'side'

将验证消息放在控件右侧。

msgTarget:'side'

将在字段右侧添加一个错误图标，仅在悬停时的弹出窗口中显示消息

如果仔细阅读文档，msgTarget还有一个选项

[element id]将错误消息直接添加到指定元素的innerHTML。

---

您必须使用id动态地在控件的右侧添加一个“td”。然后，如果您指定

msgTarget:'element id'

，它将工作。

msgTarget:'elementId'可以工作，但它似乎非常有限，特别是当您需要一个可重用ExtJs组件的多个实例时例如，我有一个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();
            }
        }
    }
}

---

右侧使用msgTarget“side”进行验证，底部使用msgTarget“under”进行验证

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

---

您可以使用“msgTarget:[元素id]”。必须编写html才能使用元素id而不是itemId。验证函数在设置为“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
        }
    ]
}

{
xtype:'容器'，
项目：[
{
xtype:'textfield'，
allowBlank:false，
msgTarget:“霍格”
blankText:'验证消息'，//可选
},
{
xtype:'框'，
html:“”//此id必须与msgTarget相同
}
]
}

要在输入文本框的/side下显示错误消息，msgTarget属性仅在您使用表单布局时有效

为了在表单布局以外的其他地方解决这个问题，我们需要在“x-form-field-wrap”类中包装元素

您可以找到有关线程的更多信息：

---

这是直接从示例中获得的。您最好仔细阅读这些示例。@DmitryB，谢谢您的回复。您能提供一些示例吗？请阅读下面我对JohnnyHK的评论。我收回我的评论。显示完整错误消息的唯一方法是使用“under”msgTarget-请参阅此示例中的电话字段：@Jomet below men元素ID开关需要更多的工作，但这是您必须要做的。感谢回复，但此选项仅将感叹号图标放置在控件右侧，而不是消息。我需要显示消息，而不是作为图标的工具提示。