ExtJS4: Comment afficher le message d'erreur de validation à côté de textbox, combobox etc

J'ai besoin pour mettre en œuvre la validation des messages qui s'affichent à droite à côté de champ non valide. Toute aide serait appréciée.

source d'informationauteur berliner

  1. 14

    msgTarget: 'side' va Ajouter une icône d'erreur à la droite du champ, en affichant le message dans une fenêtre sur le vol stationnaire.

    si vous lisez attentivement la documentation, une option de plus est là pour msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.forme.champ.Texte-cfg-msgTarget

    [id de l'élément] Ajouter le message d'erreur directement à la innerHTML de l'élément spécifié.
    vous devez ajouter un "td" sur le côté droit de la contrôler dynamiquement avec l'id. alors si vous spécifiez msgTarget: 'element id' il va travailler.

  2. 8

    La msgTarget: 'elementId' peut fonctionner, mais il semble très limitée, en particulier lorsque vous souhaitez que plusieurs instances de l'une réutilisables ExtJs composant (et à cet effet, plusieurs instances de la même msgTarget élément). Par exemple, j'ai un MDI éditeur de style où vous pouvez ouvrir plusieurs éditeurs d'un type dans un onglet de l'interface. Il ne semble pas fonctionner avec itemId ou de reconnaître les DOM/conteneur hiérarchie.

    À cet effet, je préfère éteindre la gestion par défaut si je ne veux pas exactement celui de la construction dans le message afficher les options de réglage msgTarget: none et puis l'exécution de mon propre message à afficher par la manipulation de la fielderrorchange événement qui est conçu exactement pour ce scénario. Dans ce cas, je peux maintenant un respect de la hiérarchie de mes formes, même avec plusieurs instances de la même forme de l'éditeur que je peux sélectionner l'erreur d'affichage de l'élément 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();
            }
        }
    }
}
  3. 6

    Voir le msgTarget config du contrôle. msgTarget: 'side' mettrais le message de validation pour le droit de la contrôler.

  4. 1

    Utilisation msgTarget "côté" pour validation à droite et msgTarget 'sous' par le bas

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

    Vous pouvez utiliser 'msgTarget: [id d'élément de]'. Vous devez écrire le code html afin d'utiliser l'id de l'élément au lieu de itemId. La fonction de validation ajoute un élément de la liste en vertu d'un élément que vous définissez comme "msgTarget'.
    Dans le cas où vous souhaitez afficher les éléments que vous souhaitez pour la validation, vous pouvez passer du html au lieu de simplement 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
        }
    ]
}
  6. 0

    Pour afficher le message d'erreur sous/côté la zone de saisie, msgTarget propriété ne fonctionne que dans le cas où vous êtes en utilisant le formulaire de mise en page.

    Pour contourner ce problème dans autre que le formulaire de mise en page, nous avons besoin d'envelopper l'élément "x-form-champ-wrap" de la classe.

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