我想要實現的X按鈕一個文本框內側（文本框的右側x）的清除輸入文本的文本。我見過很多具有此功能的extjs應用程序。我該如何去做呢？任何建議或意見將非常感激...... 感謝如何把X內部文本框以清除在ExtJS的

它看起來是這樣的......

enter image description here

2012-11-27 EagleFox

你必須使用一個Ext.form.field.Trigger。以下是一個

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

爲了便於測試的一個例子，這裏是一個JSFiddle

來源

2012-11-27 17:29:27 sra

甜觸發。由於SRA ......這正是我需要的...我需要定義，美在這裏使用 – EagleFox

@EagleFox是你做的CLS。否則，它會看起來像一個組合。但圖標和類是ExtJS的默認設置。所以沒有其他的事情需要去做 – sra

cool sra ... m試試這個rightnow – EagleFox

這對我來說是什麼工作與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; 
    }

類

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

來源

2012-11-27 18:37:16

謝謝Stephen ... – EagleFox

或者使用「clearbutton」插件：http://www.eekboom.de/ClearButton.html

我喜歡它，因爲它是不是需要自定義子類只是一個插件，一行。

而且，它可以在各種領域，而不僅僅是一個文本框的使用。

來源

2013-05-21 17:45:52

您可以在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觸發器使用的處理程序的功能，即onSearch，即在具有Ext.form.field.Text對象的組件的控制器限定的。

來源

2016-12-21 19:28:12 jbarrameda

在ExtJS的6+，你也可以只添加您Ext.form.field.Text，並呈現出以下2個CONFIGS /隱藏與內置的變化監聽

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

來源

2017-07-13 23:43:19

如何把X內部文本框以清除在ExtJS的

回答

CSS

使用

相關問題