如何在extjs中将X放置在文本框内以清除文本

Question

我希望在文本框内实现一个X按钮（文本框右侧的X）以清除输入的文本。我看过许多具有此功能的extjs应用程序。我该怎么做呢？任何建议或评论都将不胜感激... 谢谢

它看起来像这样...

- EagleFox

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

- sra

---

太好了。谢谢sra...这正是我需要的...我需要定义你在这里使用的cls吗？ - EagleFox

@EagleFox 是的，你需要这样做。否则它看起来像一个组合框。但图标和类是ExtJS默认的。所以不需要做其他的事情。 - sra

请注意：在后来的ExtJS版本（例如4.2）中，类后缀现在是form-clear-trigger。 - mwhs

如何将它从右侧移动到左侧？使用Ext 5.1 @sra。 - PhoonOne

请注意，类Trigger已被弃用：自Ext JS 5.0起，该类已被弃用。建议改用带有触发器配置的Ext.form.field.Text。链接 - jbarrameda

Answer 2

以下是我在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;
    }

Class

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

- Stephen Tremaine

Answer 3

或者使用这个“clearbutton”插件：http://www.eekboom.de/ClearButton.html 我喜欢它，因为它只是一个插件，只有一行代码，而不需要自定义子类。此外，它可以用于各种类型的字段，而不仅仅是文本字段。

- Gonfi den Tschal

Answer 4

在ExtJS 6+中，你也可以在Ext.form.field.Text上添加以下两个配置项，并使用内置更改监听器来显示/隐藏触发器。

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

- Kevin Lee

Answer 5

你可以在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对象的组件的控制器中定义。

- jbarrameda