16

無効なフィールドのすぐ隣に表示される検証メッセージを実装する必要があります。どんな助けでも大歓迎です。

4

6 に答える 6

19

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

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

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

于 2012-06-05T12:31:50.580 に答える
10

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

したがって、組み込みのメッセージ表示オプションの 1 つだけを設定してから、このシナリオ用に設計されたイベントを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 に答える