如何在文本字段中放置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