Xをテキストフィールド内に入れてextjs内のテキストをクリアするには

Question

入力されたテキストを消去するには、テキストフィールド（テキストフィールドの右側にあるx）の中にXボタンを実装します。私はこの機能を持つ多くのextjsアプリケーションを見てきました。それをどうやって行うのですか？任意の提案やコメントは本当にあなたがExt.form.field.Triggerを使用する必要があります... おかげ

それは次のようになります...

Answer 1

をいただければ幸いです。ここでは、テストを容易にするためにその

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

ための一例であり、ここでこれはCSSで私のためにどのような作品ですJSFiddle

Answer 2

です：

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

クラス

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

    alias: 'widget.clearfield', 

    triggerBaseCls: 'x-form-clear', 

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

使用

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

Answer 3

それともこの「clearbutton」プラグインを使用します。http://www.eekboom.de/ClearButton.html

をそれだけでプラグイン、1本のライン、代わりのカスタムサブクラスを必要としますので、私はそれが好きです。

また、テキストフィールドだけでなく、あらゆる種類のフィールドで使用できます。

Answer 4

あなたはExtJSに5.0以降では、新しい型を定義する必要はありませんでのトリガーとExt.form.field.Textを使用することができます。

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

トリガーのハンドラの有効範囲はExt.form.field.Textです。

複数のトリガーを持つことができ、MVVMモデルも使用できます。例えば：

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トリガExt.form.field.Text目的としている成分のコントローラで定義されているハンドラ関数、すなわちonSearchを使用します。 ExtJSの6+で

Answer 5

、あなたはまた、単に組み込みの変更リスナー

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