Comment faire pour afficher une icône après textfield comme une “Aide” pour entrer les valeurs dans les champs

Je suis en utilisant Extjs 4.1

J'ai un formulaire avec quelques objets textfield.

Je veux montrer une aide de l'icône à côté de ce champ pour permettre à l'utilisateur d'entrer la valeur correcte, même si le formulaire est affiché.

Tout organisme peut m'aider dans la résolution de ce.

  • Merci de travailler sur votre rep avant d'en parler à d'autres utilisateurs, il ne devrait pas poser plus de questions.
InformationsquelleAutor Srinivas B | 2012-08-30
  1. 3

    Essayez d'utiliser Ext.forme.TriggerField en place d'un champ de texte.

    Reportez-vous Extjs docs de référence http://extjs.cachefly.net/ext-3.4.0/docs/

    Pour ExtJs 4.1:

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.forme.champ.Déclencheur

    • Il a besoin d'un 4.1 solution, votre lien pointe vers 3.4 docs.
    • Merci pour ur répondre.J'ai essayé à l'aide de déclencheurs.Fonctionne très bien.Mais le problème c'est que je veux afficher une info-bulle lorsque je passe la souris sur cette icône.Comment puis-je configurer un outil de pointe pour cette icône? Mon code pour le déclencheur est comme suit xtype: "trigger", fieldLabel: 'Srinivas', triggerCls: "trigger", largeur:190 Le Cls est .x-form-trigger-wrap .déclencheur{background-image:url('delete.png');background-position:0 0;largeur:17px;hauteur:21px;border-bottom:0px solid #b5b8c8;curseur:pointeur;cursor:hand;overflow:hidden;background-repeat: no-repeat} u Peut m'aider à placer un outil de pointe.
    • Consultez ce lien sencha.com/forum/showthread.php?66661-TriggerField-Icon-tooltip
    • Puis-je avoir un icône à côté de la liste déroulante ?
    • oui, vous pouvez.. l'utilisation tpl propriété de la combo. countryCombo = Ext.create('Ext.forme.champ.Zone de liste déroulante', { displayField : 'nom', valueField : "code", de grandir : c'est vrai, store : countryStore, queryMode : 'local', listConfig: { getInnerTpl: function() { // ici, vous placez vos images dans un combo var tpl = '<div>'+ '<img src="images/flags/{iso2}.png" align="left">&nbsp;&nbsp;'+ '{nom}</div>'; return tpl; } } });
    • TriggerField rapports comme obsolète dans ExtJs 5: [W] Ext.form.field.Trigger is deprecated. Use Ext.form.field.Text instead.

    InformationsquelleAutor AJJ
  2. 11

    Façon la plus simple à mon humble avis, c'est de placer "icône d'aide" à la fin du texte de l'étiquette à l'aide de afterLabelTextTpl comme ceci:

    afterLabelTextTpl: '<img src="images/information.gif" class="info_image" data-qtip="your help text or even html comes here...."></img>'

    Peut être utilisé avec n'importe quel domaine...

    InformationsquelleAutor Michal Levý
  3. 2

    J'ai fait un plugin qui permet d'utiliser le afterLabelTextTpl config de Ext.form.Labelable qui est mixined à toutes sortes de domaines comme la zone de liste déroulante.

    Voici comment l'utiliser.

    {
    xtype: 'textfield',
    fieldLabel: 'Some field label',
    name: 'name',
    plugins:[{
        ptype:'afterlabelinfo',
        qtip:'The text appearing after hovering over the icon'
    }]
}

    Voici le plugin dont vous avez besoin.

    Ext.define('Ext.ux.plugin.AfterLabelInfo', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.afterlabelinfo',

    init: function (cmp) {
        var me = this; //the plugin

        cmp.afterLabelTextTpl = [
            '<span',
            ' class="x-ux-plugin-afterlabelinfo"',
            ' data-qtip="',
            Ext.util.Format.htmlEncode(me.qtip || ''),
            '">',
            '</span>'
        ].join('');
    }
});

    Voici un peu de css que vous avez besoin.

    .x-ux-plugin-afterlabelinfo {
    display: inline-block;
    margin-left: 5px;
    width: 12px;
    height: 12px;
    background-image: url(img/info-after.png) !important;
}

    Et l'icône Comment faire pour afficher une icône après textfield comme une “Aide” pour entrer les valeurs dans les champs (clic droit et enregistrer sous)

    Le résultat

    Comment faire pour afficher une icône après textfield comme une “Aide” pour entrer les valeurs dans les champs

    InformationsquelleAutor Christiaan Westerbeek
  4. 0

    La meilleure approche pour moi est d'utiliser Ext.de la pointe.QuickTipView qui peut être facilement ajouté à afterrender événement comme celui-ci:

    afterrender: function(me) {
  //Register the new tip with an element's ID
  Ext.tip.QuickTipManager.register({
     target: me.getId(), //Target button's ID
     text  : 'My Button has a QuickTip' //Tip content  
  });
}

    https://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.de la pointe.QuickTip

    InformationsquelleAutor fen1ksss
  5. -2

    Pour ajouter l'image à la combo,

    utilisation tpl propriété de la combo. 

     Combo = Ext.create('Ext.form.field.ComboBox', {
    displayField : 'name',
    valueField   : 'code',
    grow         : true,
    store        : store,
    queryMode    : 'local',
    listConfig: {
        getInnerTpl: function() {
            //here you place the images in your combo
            var tpl = '<div>'+
                      '<img src="images/flags/{iso2}.png" align="left">&nbsp;&nbsp;'+
                      '{name}</div>';
            return tpl;
        }
    }
});
    • Cela rendra l'intérieur de la zone de liste déroulante liste, ce n'est pas la question ici. Il demande derrière le champ lui-même.
    InformationsquelleAutor AJJ