Wie man X in textfield zu Klartext in extjs

Ich umsetzen will, eine X-Taste im textfield (x auf der rechten Seite des textfield) um die eingegebenen Texte. Ich habe viele gesehen, die extjs-Anwendung, die diese Funktion hat. Wie kann ich dies tun? Vorschläge oder Kommentare, wäre echt dankbar...
Dank

sieht es etwas so aus...

Wie man X in textfield zu Klartext in extjs

InformationsquelleAutor EagleFox | 2012-11-27
  1. 12

    Müssen Sie eine Ext.form.Feld.Trigger. Hier ist ein Beispiel für das

    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'
    }]
});

    Für das testen zu vereinfachen, hier ist eine JSFiddle

    • Süß. Dank sra... das ist genau das was ich brauche... brauche ich zum definieren der cls ist, dass u hier verwendet habe
    • Ja, Sie tun. Sonst wird es Aussehen wie ein combo. Aber das Icon und Klasse sind ExtJS Standard. Also nichts anderes getan werden müssen
    • cool sra... m versuchen, die rightnow
    • arbeitete wie ein Charme.. danke sra
    • Du bist willkommen 🙂
    • Hinweis: in späteren ExtJS-Versionen (z.B. 4.2) die Klasse postfix ist jetzt form-clear-trigger.
    • Es zeigt also, bis auf der rechten Seite, wie Verschiebe ich es auf die linke Seite? Mit ext 5.1 @sra
    • Der JSFiddle funktioniert nicht mehr.
    • Beachten Sie, dass die Klasse Trigger ist veraltet: die Ext JS 5.0 diese Klasse ist veraltet. Es wird empfohlen, mit einer Ext.form.Feld.Text mit dem Trigger config statt. link

    InformationsquelleAutor sra
  2. 3

    Dies ist, was funktioniert für mich mit dem 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;
    }

    Klasse

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

    alias: 'widget.clearfield',

    triggerBaseCls: 'x-form-clear',

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

    Nutzung

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

    Oder Verwendung dieser "clearbutton" plugin: http://www.eekboom.de/ClearButton.html

    Ich mag es, weil es nur ein plugin, eine Zeile, anstelle dass eine benutzerdefinierte Unterklasse.

    Auch, kann es sein verwendet auf alle Arten von Feldern, nicht nur auf ein textfield.

    InformationsquelleAutor Gonfi den Tschal
  4. 2

    Können Sie die Ext.form.field.Text mit Triggern in Extjs-Version 5.0 oder höher, keine Notwendigkeit, zu definieren, eine neue Art.

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

    Den Umfang der trigger-handler ist das Ext.form.field.Text Komponente.

    Können Sie mehrere Trigger, und können auch MVVM-Modell. Zum Beispiel:

    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'
        }
   }
});

    Den search trigger verwendet eine handler-Funktion, D. H. onSearch, dass definiert wird, in der controller von der Komponente, die den Ext.form.field.Text Objekt.

    InformationsquelleAutor jbarrameda
  5. 1

    In ExtJS 6+, Sie können auch fügen Sie einfach die folgenden 2 configs auf Ihre Ext.form.field.Text - und-show/hide die trigger mit den eingebauten change listener

    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);
        }
    }
}
    InformationsquelleAutor Kevin Lee
Schreibe einen Kommentar