Ext.form.Panel's beforesubmit listener does not respect return: false when attached via controller

Question

I have a formpanel with a beforesubmit listener, which should prevent the submission if the form is invalid.

Sencha Fiddle availble here: https://fiddle.sencha.com/#fiddle/3j5l (just comment the beforesubmit: 'onFormBeforeSubmit' line within the controler/panel and inspect the console to see the difference)

The listener is attached via a controller trough the init function like this:

//controller init function
init: function () {
        var me = this;
        me.listen({
            component: {
                'formpanel': {
                    beforesubmit: 'onFormBeforeSubmit'
                }
            }
        });
},
onFormBeforeSubmit: function () {
  console.log(arguments);
  var me = this, form = me.getView();
  console.log('beforesublit event fired');
  if (!form.validate()) {
      console.log('form is invalid!');
      return false;
  } 
}

And all seems fine - the submit procedure is started, the onFormBeforeSubmit() method is executed, the form is considered invalid, but althought there is a return false statement - the form is submitted to the server.

Then, i tried to attach the listener simply via the listeners config of the panel like this:

//panel definitions...
listeners: {
  beforesubmit: 'onFormBeforeSubmit'
}

And then it worked as expected.

As you can see the executed function is the same. One thing i mentioned is that it receives different arguments - if triggered via the listeners config - it has a 5 arguments. Via controller - they are 4. The 5th one is an obect like this:

beforesubmit: "onFormBeforeSubmit"
scope: "self"

Can someone explain me why is this? Is it a bug or an expected behavior?

And after all - where is the right place to attach the listeners - in the controller or within the view??

Thanks.

Answer 1

First of all, you don't have to do this in init function. Simply use control block of your viewcontroller like this:

control: {
  formpanel: {
    beforesubmit: 'onFormBeforeSubmit'
  }
},

Please refer the documentation of control, it is much more straightforward to use that.

But it still not enough, and I think you are right, this is a bug. FormPanel's submit actually still using already deprecated function to fire events. Please try the following override, it should fix this and allows you to use event listeners defined in controllers:

Ext.define('FixPanelEventFiring',{
   override: 'Ext.form.Panel',
   submit: function(options, e) {
        var me = this,
            formValues, form;

        options = options || {};

        formValues = me.getSubmitValues({
            enabled: me.getStandardSubmit() || !options.submitDisabled
        });
        form = me.element.dom || {};

        if (this.getEnableSubmissionForm()) {
            form = this.createSubmissionForm(form, formValues);
        }

        options = Ext.apply({
            url: me.getUrl() || form.action,
            submit: false,
            form: form,
            method: me.getMethod() || form.method || 'post',
            autoAbort: false,
            params: null,
            waitMsg: null,
            headers: null,
            success: null,
            failure: null
        }, options || {});

        return me.fireEventedAction('submit',
                             [me, formValues, options, e],
                             'doBeforeSubmit',
                             this,
                             null,
                             'after'
        );
    },
});

Please be sure you include this in your overrides. You can also test this in fiddle, just add it before everything else. I'm not 100% sure it is perfect, I can imagine there are other issues with this, so please test this well.