Button 如何将X放在textfield中以清除extjs中的文本

我想在textfield中实现一个X按钮（textfield右侧的X）来清除输入的文本。我见过许多具有此功能的extjs应用程序。我该怎么做呢？如果您有任何建议或意见，我们将不胜感激。。。 谢谢

看起来像这样

---

您必须使用。这里有一个例子

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的原因：

CSS 等级 用法

---

或者使用此“clearbutton”插件：

我喜欢它，因为它只是一个插件，一行，而不需要自定义子类

---

此外，它可以用于所有类型的字段，而不仅仅是文本字段。

您可以在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

对象的组件的控制器中定义，您还可以在

Ext.form.field.Text

上添加以下2个配置，并使用内置的更改侦听器显示/隐藏触发器

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

---

好极了。谢谢sra。。。这正是我需要的。。。我是否需要定义您使用的clshere@EagleFox是的，你知道。否则它将看起来像一个组合。但是图标和类是ExtJS默认值。所以不需要做任何其他事情：在以后的ExtJS版本（即4.2）中，类后缀现在是

form clear trigger

。因此它显示在右侧，如何将其移动到左侧？使用ext 5.1@sraNote，类触发器已被弃用：自ext JS 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('');
            }
        }
   }
});

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

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