Jak umieścić X wewnątrz pola tekstowego, aby wyczyścić tekst w extjs

Question

Chcę zaimplementować przycisk X wewnątrz pola tekstowego (x po prawej stronie pola tekstowego), aby wyczyścić wprowadzone teksty. Widziałem wiele aplikacji extjs, które mają tę funkcję. Jak mam to zrobić? Wszelkie sugestie lub komentarze byłyby bardzo mile widziane ... Dzięki

to wygląda mniej więcej tak ...

Answer 1

Musisz użyć Ext.form.field.Trigger. Oto przykład dla tej

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

Dla ułatwienia testowania, tutaj jest JSFiddle

Answer 2

To co działa na mnie z 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; 
    } 

Klasa

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

    alias: 'widget.clearfield', 

    triggerBaseCls: 'x-form-clear', 

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

Wykorzystanie

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

Answer 3

Albo skorzystać z tej „” clearbutton wtyczki: http://www.eekboom.de/ClearButton.html

mi się podoba, bo to tylko wtyczki, jedna linia, zamiast wymagających niestandardowej podklasy.

Może być również używany na wszystkich polach, a nie tylko na polach tekstowych.

Answer 4

Możesz użyć Ext.form.field.Text z wyzwalaczami w programie Extjs 5.0 i nowszych, bez konieczności definiowania nowego typu.

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

Zakres obsługi wyzwalacza to komponent Ext.form.field.Text.

Można mieć wiele wyzwalaczy, a także można użyć modelu MVVM. Np

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

search wyzwalania wykorzystuje funkcję obsługi, tzn onSearch, który jest zdefiniowany w kontrolerze składnika, który ma na celu Ext.form.field.Text.

Answer 5

W ExtJS 6+, można też po prostu dodać następujące 2 configs na Ext.form.field.Text i pokazać/ukryć spust z wbudowaną zmiany słuchacza

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