web-dev-qa-db-fra.com

ExtJS4: Comment afficher un message d'erreur de validation à côté de la zone de texte, de la liste déroulante, etc.

J'ai besoin d'implémenter les messages de validation qui apparaissent juste à côté du champ invalide. Toute aide serait appréciée.

extjsextjs4
15
berliner

msgTarget: 'side' ajoutera une icône d'erreur à la droite du champ, affichant le message dans une fenêtre contextuelle en survol uniquement.

si vous lisez attentivement la documentation, il existe une option supplémentaire pour msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[identificateur d'élément] Ajoutez le message d'erreur directement au innerHTML de l'élément spécifié. vous devez ajouter un "td" à droite du contrôle de façon dynamique avec l'id. alors si vous spécifiez msgTarget: 'element id' cela fonctionnera.

15
Jom

Le msgTarget: 'elementId' peut fonctionner, mais il semble très limité, en particulier lorsque vous souhaitez plusieurs instances d'un composant ExtJs réutilisable (et donc plusieurs instances du même élément msgTarget). Par exemple, j'ai un éditeur de style MDI dans lequel vous pouvez ouvrir plusieurs éditeurs du même type dans une interface à onglet. Cela ne semble pas non plus fonctionner avec itemId ou reconnaître la hiérarchie DOM/conteneur.

Je préfère donc désactiver la gestion par défaut si je ne veux pas exactement l'une des options d'affichage de message intégrées en définissant msgTarget: none, puis en effectuant mon propre affichage de message en gérant l'événement fielderrorchange qui est conçu exactement pour ce scénario. Dans ce cas, je peux maintenant respecter la hiérarchie de mes formulaires, même avec plusieurs instances du même formulaire d'éditeur, car je peux sélectionner l'élément d'affichage d'erreur par rapport à l'éditeur.

Voici comment je le fais:

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

Voir le msgTarget config du contrôle. msgTarget: 'side' mettrait le message de validation à droite du contrôle.

6
JohnnyHK

Vous pouvez utiliser 'msgTarget: [element id]'. Vous devez écrire du code HTML pour pouvoir utiliser l'id d'élément au lieu de itemId. La fonction de validation ajoute un élément de liste sous un élément que vous définissez comme "msgTarget" . Si vous souhaitez afficher les éléments que vous souhaitez pour la validation, vous pouvez passer du code HTML au lieu d'un texte.

{
    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

Utilisez msgTarget 'side' pour la validation dans le côté droit et msgTarget 'under' pour le bas

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

Pour afficher le message d'erreur under/side dans la zone de texte de saisie, la propriété msgTarget fonctionnera uniquement si vous utilisez la présentation de formulaire.

Pour résoudre ce problème autrement que dans la présentation du formulaire, nous devons envelopper l'élément dans la classe "x-form-field-wrap".

vous pouvez trouver plus de détails sur le fil: https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem

0
ganesh phirke