Question

我正在开发用户界面，我希望有两个可以调用不同事件的搜索框。我想知道我是否可以用多个事件实现一个触发器。

以下是触发器及其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从触发器2触发不同的事件？

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和上面的代码中，您可以看到默认操作是显示一个警告“默认操作”，但在触发器2上我重新定义事件处理程序以调用警告“我们将覆盖此”

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

1 个答案: