Comment mettre X à l'intérieur de champ de texte à texte clair dans extjs

Je veux implémenter un bouton X à l'intérieur d'un textfield (x sur la droite du champ de texte) pour effacer les saisies de textes. J'ai vu beaucoup de extjs application qui dispose de cette fonctionnalité. Comment dois-je faire? Toute suggestion ou commentaires seraient appréciés...
Grâce

il ressemble à quelque chose comme ça...

Comment mettre X à l'intérieur de champ de texte à texte clair dans extjs

OriginalL'auteur EagleFox | 2012-11-27

  1. 12

    Vous devez utiliser un Ext.forme.champ.Déclencheur. Voici un exemple pour que

    Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',
    initComponent: function () {
        var me = this;

        me.triggerCls = 'x-form-clear-trigger'; //native ExtJS class & icon

        me.callParent(arguments);
    },
    //override onTriggerClick
    onTriggerClick: function() {
        this.setRawValue('');
    }
});

Ext.create('Ext.form.FormPanel', {
    title: 'Form with TriggerField',
    bodyPadding: 5,
    width: 350,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'customtrigger',
        fieldLabel: 'Sample Trigger',
        emptyText: 'click the trigger'
    }]
});

    Pour faciliter les tests, voici un JSFiddle

    Doux. Grâce sra... c'est exactement ce dont j'ai besoin... j'ai besoin de définir les cls que u ont utilisé ici
    Oui, vous l'avez. Sinon, il va ressembler à un combo. Mais l'Icône et la classe sont ExtJS par défaut. Si rien d'autre, doit être fait
    cool sra... essaie que rightnow
    a travaillé comme un charme.. merci sra
    Vous êtes les bienvenus 🙂

    OriginalL'auteur sra

  2. 3

    C'est ce qui fonctionne pour moi avec le CSS:

    CSS

        .x-form-clear {
        background-image: url('../../resources/themes/images/default/form/clear-trigger.gif');
        background-position: 0 0;
        width: 17px;
        height: 22px;
        border-bottom: 1px solid #b5b8c8;
        cursor: pointer;
        cursor: hand;
        overflow: hidden;
    }

    .x-form-clear-over {
        background-position: -17px 0;
        border-bottom-color: #7eadd9;
    }

    .x-form-clear-click {
        background-position: -68px 0;
        border-bottom-color: #737b8c;
    }

    Classe

    Ext.define('Ext.ux.form.field.Clear', {
    extend: 'Ext.form.field.Trigger',

    alias: 'widget.clearfield',

    triggerBaseCls: 'x-form-clear',

    onTriggerClick: function() {
        this.setValue();
    }
});

    Utilisation

    Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        Ext.create('Ext.ux.form.field.Clear', {
            fieldLabel: 'Clear Field',
            cls: 'clear-trigger'
        })
    ]
})
    Merci Stephen...

    OriginalL'auteur Stephen Tremaine

  3. 3

    Ou de l'utilisation de ce "clearbutton' plugin: http://www.eekboom.de/ClearButton.html

    Je l'aime parce que c'est juste un plugin, une ligne, au lieu d'exiger une sous-classe personnalisée.

    Aussi, il peut être utilisé sur toutes sortes de domaines, et pas seulement sur un champ de texte.

    OriginalL'auteur Gonfi den Tschal

  4. 2

    Vous pouvez utiliser le Ext.form.field.Text avec des déclencheurs dans Extjs 5.0 et versions ultérieures, aucun besoin de définir un nouveau type.

    var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        }
   }
});

    Le champ d'application de la gâchette du gestionnaire est la Ext.form.field.Text composant.

    Vous pouvez avoir de multiples facteurs, et peut également utiliser le modèle MVVM. Par exemple:

    var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        },
        search: {
            cls: 'x-form-search-trigger',
            handler: 'onSearch'
        }
   }
});

    La search trigger utilise une fonction de gestionnaire, c'est à dire onSearch, qui est définie dans le contrôleur de la composante qui a le Ext.form.field.Text objet.

    OriginalL'auteur jbarrameda

  5. 1

    Dans ExtJS 6+, vous pouvez également ajouter les 2 configs sur votre Ext.form.field.Text et afficher/masquer le déclencheur intégré dans le changement écouteur

    triggers: {
    clearText: {
        cls: 'clear-text-trigger-icon',
        handler: function() {
            this.setValue('');
        }
    }
},
listeners: {
    change: function(textField) {
        if (textField.getValue()) {
            textField.setHideTrigger(false);
        } else {
            textField.setHideTrigger(true);
        }
    }
}

    OriginalL'auteur Kevin Lee