16

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

4

6 回答 6

19

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

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

[元素id] 将错误信息直接添加到指定元素的innerHTML。 您必须使用 id 在控件的右侧动态添加一个“td”。然后，如果您指定msgTarget: 'element id' 它将起作用。

于 2012-06-05T12:31:50.580 回答
10

可以工作，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();
            }
        }
    }
}
于 2012-11-23T18:41:11.603 回答
7

查看控件的msgTarget配置。 msgTarget: 'side'会将验证消息放在控件的右侧。

于 2012-06-03T14:27:34.463 回答
2

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

     items: [{
                xtype: 'textfield',
                fieldLabel: 'Name',
                allowBlank: false,
                name: 'name',
                msgTarget: 'side',
                blankText: 'This should not be blank!'
            }]
于 2014-11-12T04:41:50.963 回答
2

您可以使用“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
        }
    ]
}
于 2015-07-28T03:25:53.553 回答
0

要在输入文本框下方/侧面显示错误消息， msgTarget属性仅在您使用表单布局的情况下才有效。

要在表单布局之外解决这个问题，我们需要将元素包装在“x-form-field-wrap”类中。

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

于 2018-02-24T18:17:48.207 回答