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

Question

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

Answer 1

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

如果你仔细阅读文档,可以在msgTarget中找到另一个选项http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[element id]将错误消息直接添加到指定元素的innerHTML. 你必须使用id动态地在控件的右侧添加"td".然后,如果你指定msgTarget: 'element id' 它将工作.

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

Answer 3

请参阅控件的msgTarget配置. msgTarget: 'side'将验证消息放在控件的右侧.