extjs - 如何为子组件的自定义事件创建监听器

Question

我正在使用具有另一个子面板（例如 childPanel）的面板（例如 parentPanel）。如何从 childPanel 触发将被 parentPanel 捕获的自定义事件？

Answer 1

像这样：

Ext.define('Ext.ux.form.Panel', {
    extend: 'Ext.form.Panel',
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    defaultType: 'textfield',
    initComponent: function() {
        var me = this;
        me.items = [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        }];
        me.callParent(arguments);
    },

    afterRender: function() {
        var me = this;
        me.callParent(arguments);
        // in case of a form you can also use the findField() method
        // I used down() because it will work with all sort of containers
        me.down('textfield[name=first]').on('change',me.onFirstnameChange,me);
    },

    onFirstnameChange: function(field) {
        // custom handler
    }
});

仅在单个实例上执行此操作的方式与您需要使用 afterrender 事件而不是静态 template method 的方式相同。

注意： 如果这不符合您的需求，您需要发布更详细的问题（带有示例代码）以获得更详细的答案。

编辑：

向新组件添加自定义事件：

initComponent: function() {
    // ...
    me.addEvents('customeventname');
    // ... 
}

您现在可以在此组件的实例上注册此事件的侦听器，并通过调用 fireEvent('customeventname', args) 触发事件，其中 args 是您要调用每个侦听器的参数。