web-dev-qa-db-ja.com

ExtJS4：テキストボックス、コンボボックスなどの横に検証エラーメッセージを表示する方法

無効なフィールドのすぐ隣に表示される検証メッセージを実装する必要があります。任意の助けいただければ幸いです。

extjsextjs4
15
berliner

msgTarget: 'side'は、フィールドの右側にエラーアイコンを追加し、ホバー時のみポップアップにメッセージを表示します。

ドキュメントを注意深く読んだ場合、msgTargetにはもう1つのオプションがあります http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg -msgTarget

[element id]エラーメッセージを指定された要素のinnerHTMLに直接追加します。 "td"をコントロールの右側に追加する必要がありますIDで動的に。次に、msgTarget: 'element id'を指定すると機能します。

17
Jom

msgTarget: 'elementId'は機能しますが、特に1つの再利用可能なExtJsコンポーネントの複数のインスタンス（したがって、同じmsgTarget要素の複数のインスタンス）が必要な場合は、非常に制限されているようです。たとえば、MDIスタイルエディターがあり、タブインターフェースで1つのタイプの複数のエディターを開くことができます。また、itemIdで動作しない、またはDOM /を認識しないようです。コンテナ階層。

そのため、msgTarget: noneを設定して組み込みのメッセージ表示オプションの1つだけを必要としない場合は、デフォルトの処理をオフにしてから、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();
            }
        }
    }
}
9
BenSwayne

コントロールの msgTarget 構成を参照してください。 msgTarget: 'side'は、検証メッセージをコントロールの右側に配置します。

6
JohnnyHK

'msgTarget：[element id]'を使用できます。 itemIdの代わりに要素IDを使用するには、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
        }
    ]
}
1
Kohei Mikami

右側の検証にはmsgTarget 'side'を使用し、下部にはmsgTarget 'under'を使用します

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

エラーメッセージunder/sideを入力テキストボックスに表示するには、msgTargetプロパティは、フォームレイアウトを使用している場合にのみ機能します。

フォームレイアウト以外でこれを回避するには、「x-form-field-wrap」クラスで要素をラップする必要があります。

あなたはスレッドでもっと見つけることができます： https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem

0
ganesh phirke