Custom Events

[cweirich]

Hi,

I'm trying to use custom events in architect, so I've done the following

1) In the ClientForm view, I've added a Custom Event named 'clientsaved'.
2) In the ClientController, I've added a controller action with ClientForm as the targetType and 'clientsaved' as the EventBinding. In this action, there's just a call to console.log to check if it's executing.
3) In the success callback of the submit action, I've fired the 'clientsaved' event, like this:

this.form.submit({
        waitMsg: 'Saving...',
        success: function(form, action) {
            Ext.Msg.alert('Client Saved!');
            form.fireEvent('clientsaved');
            console.log('client saved event fired');
        },
        failure: function(form, action) {
            if (action.result) {
                Ext.Msg.alert('Error', action.result.Message);
            }
            else { 
                Ext.Msg.alert('Error', 'Unexpected Error.');
            }
        }
    });

And the method configured to be executed in the controller never gets called.
What am I doing wrong?

Thanks.

[aconran]

So typically when you are firing events you will fire from the "this" scope.

You should be firing the event from the same place you define it at.

We'll need some more data as to what your control query looks like and what the clientform definition looks like to help you more.

[cweirich]

I know scope can be confusing in JS (so maybe I'm confused) but isn't the form object that's calling fireEvent the one where the event is defined? I mean, the submit action parameter 'form' is the form where it originated (ClientForm) right?

Also, even if this callback method was defined inside the form, wouldn't 'this' be a reference to the submit action?

The action configuration:

controlQuery: #clientForm
targetType: ClientForm
fn: onClientFormClientsaved
name: clientsaved

The function:

onClientFormClientsaved: function(eventOptions) {
         console.log('client saved event caught');
}

ClientForm:

Ext.define('PBAS.view.ClientForm', {
    extend: 'Ext.form.Panel',
    requires: [
        'PBAS.view.ClientDetailsFieldSet',
        'PBAS.view.ContactFieldSet',
        'PBAS.view.BusinessSourceFieldSet',
        'PBAS.view.PlansFieldSet',
        'PBAS.view.InvoicesFieldSet'
    ],

    draggable: true,
    floating: true,
    height: 675,
    id: 'clientForm',
    width: 720,
    autoScroll: true,
    bodyPadding: 10,
    closable: true,
    title: 'Client',

    initComponent: function() {
        var me = this;

        me.addEvents(
            'clientsaved'
        );

        Ext.applyIf(me, {
            items: [lots of items]
        });

        me.callParent(arguments);
    }

});

Just let me know if you need more info.

Thanks.

[aconran]

The same class that has me.addEvents('clientsaved') should also have this.fireEvent('clientsaved')

[cweirich]

Ok, solved it.

First, one important thing is that the form passed in the callback function is not the form panel, but the basic form. So I had to use button.up('.panel') to get a reference for it.

Second, based on your feedback I created a fireClientSavedEvent function in the form to do this.fireEvent and then it worked.

So clientForm.fireEvent('clientsaved') doesn't work and clientForm.fireClientSavedEvent() works.

Thanks for your help, aconran.