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'会将验证消息放在控件的右侧。

Answer 4

使用msgTarget'side'进行右侧验证，将msgTarget'置于'底部

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

Answer 5

您可以使用'msgTarget：[element id]'。你必须编写html才能使用元素id而不是itemId。验证函数在您设置为“msgTarget”的元素下添加一个列表元素。如果您想要显示要进行验证的元素，可以传递html而不是文本。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        >
        <TextView
            android:id="@+id/text_home_screeen"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@color/windowBackground"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginLeft="10dp"
            android:text="@string/back_title"/>
    </android.support.v7.widget.Toolbar>

<com.example.ojasjuneja.chem.SlidingTabLayout
    android:id="@+id/sliding_tab"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</com.example.ojasjuneja.chem.SlidingTabLayout>

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >

</android.support.v4.view.ViewPager>

</LinearLayout>

Answer 6

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

要解决这个问题而不是表单布局，我们需要将元素包装在＆＃34; x-form-field-wrap＆＃34;类。

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

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

6 个答案: