button - 如何将X放在文本字段中以清除extjs中的文本

Question

我想在文本字段(文本字段右侧的x)内实现一个X按钮，以清除输入的文本。我已经看到许多具有此功能的extjs应用程序。我该怎么做呢？任何建议或评论将不胜感激...
谢谢

看起来像这样...

Answer 1

您必须使用 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