一个具有多个事件的自定义触发器 EXTJS

Question

我正在研究 UI，我希望有两个搜索框来调用不同的事件。我想知道我是否可以实现一个触发器与多个事件。

下面是带有 onTriggerClick 的触发器代码：

Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customTrigger',
    initComponent: function () {
        var me = this;
        me.triggerCls = 'x-form-search-trigger'; // native ExtJS class & icon
        me.callParent(arguments);
    },
    onTriggerClick: function(){
        alert('Hello');
    }
});

Ext.define('DIN.view.DINView', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.grid.Panel'
    ],
    xtype: 'app-main',

    items: [
        {   
            xtype: 'customTrigger',
            fieldLabel: 'trigger1',
            emptyText: 'trigger1',
            margin: '5 5 5 5',
            border: 'true',
            textAlign: 'left',
        },
        {

            xtype: 'customTrigger',
            fieldLabel: 'trigger2',
            emptyText: 'trigger2',
            margin: '5 5 5 5',
            border: 'true',
            textAlign: 'left',
        }]
});

如何让 trigger1 触发与 trigger2 不同的事件？

Answer 1

要让 trigger2 使用与 trigger1 不同的处理程序，只需像这样覆盖它：

Ext.application({
    name: 'Fiddle',


    launch: function() {
        var app = this;
        Ext.define('Ext.ux.CustomTrigger', {
            extend: 'Ext.form.field.Trigger',
            alias: 'widget.customTrigger',
            initComponent: function() {
                var me = this;
                me.triggerCls = 'x-form-search-trigger'; // native ExtJS class & icon
                me.callParent(arguments);
            },
            onTriggerClick: function() {
                alert("Default Action");
            }
        });

        Ext.define('DINView', {
            extend: 'Ext.container.Container',
            requires: ['Ext.grid.Panel'],
            xtype: 'app-main',

            items: [{
                xtype: 'customTrigger',
                fieldLabel: 'trigger1',
                emptyText: 'trigger1',
                margin: '5 5 5 5',
                border: 'true',
                textAlign: 'left',
            }, {

                xtype: 'customTrigger',
                fieldLabel: 'trigger2',
                emptyText: 'trigger2',
                margin: '5 5 5 5',
                border: 'true',
                textAlign: 'left',
                onTriggerClick: function() {
                    alert("We'll override this one");
                }
            }]
        });

        Ext.create("DINView", {
            renderTo: Ext.getBody()
        })
    }
});

当您定义 Ext.ux.CustomTrigger 时，您可以设置默认设置和处理程序等，但您始终可以选择在每个元素的基础上覆盖配置。在我的 Sencha Fiddle 和上面的代码中，您可以看到默认操作是显示一个提示 'Default Action' 但在 trigger2 上我重新定义事件处理程序以使用 "We'll override this one" 调用警报。

一个具有多个事件的自定义触发器 EXTJS

One custom trigger with multiple events EXTJS

extjs

triggers