Wie setze ich X in Textfeld um Text in extjs zu löschen

Question

Ich möchte eine X-Taste in einem Textfeld (x auf der rechten Seite des Textfelds) implementieren, um eingegebene Texte zu löschen. Ich habe viele extjs Anwendungen gesehen, die diese Funktion haben. Wie gehe ich vor? Jede Anregung oder Kommentare würden wirklich geschätzt ... THanks

es ungefähr so ​​aussieht ...

Answer 1

Sie müssen verwenden, um eine Ext.form.field.Trigger. Hier ist ein Beispiel für diese

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

Zur Erleichterung der Prüfung, hier ist ein JSFiddle

Answer 2

Dies ist, was für mich mit dem CSS funktioniert:

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

Nutzungs

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

Answer 3

Oder verwenden Sie diese 'clearbutton' Plugin: http://www.eekboom.de/ClearButton.html

Ich mag es, weil es nur ein Plugin, eine Zeile, stattdessen eine benutzerdefinierte Unterklasse von erfordern.

Auch kann es auf allen Arten von Feldern, nicht nur auf einem Textfeld verwendet werden.

Answer 4

Sie können die Ext.form.field.Text mit Triggern in Extjs 5.0 und höher verwenden, müssen Sie keinen neuen Typ definieren.

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

Der Umfang des Handlers des Triggers ist die Ext.form.field.Text Komponente.

Sie können mehrere Trigger verwenden und auch das MVVM-Modell verwenden. 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' 
     } 
    } 
}); 

Der search Trigger verwendet eine Behandlungsfunktion, d.h. onSearch, daß in dem Controller der Komponente definiert ist, die das Ext.form.field.Text Objekt hat.

Answer 5

In ExtJS 6+, können Sie auch fügen Sie einfach die folgenden zwei Konfigurationen auf Ihrem Ext.form.field.Text und Show/Ausblenden der Trigger mit dem Hörer Einbau-Änderung

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