extjs - How to create listener for child component's custom event

问题

I am using a panel (say parentPanel) having another child panel (say childPanel). How can i fire a custom event from childPanel that will be caught by parentPanel?

回答1:

Like so:

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

Doing this just on single instances work the same way expect that you will need to use the afterrender event instead of the static template method.

Note: I this doesn't fit your needs you will need to post a more detailed question (with example code) for a more detailed answer.

Edit:

Adding a custom event to a new component:

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

you can now register listeners to this events on instances of this component and fire the event by calling fireEvent('customeventname', args) where args are the arguments you want to call each listeners with.

来源：https://stackoverflow.com/questions/24525583/extjs-how-to-create-listener-for-child-components-custom-event

标签

extjs

event-handling

listener