Question

I am extending the example given in http://docs.sencha.com/architect/2-0/#!/guide/views_forms_extjs to use a more MVC centric approach. So in service of that I want to move the on click handler from the view to a newly create controller.

I have the click even working fine, but I have no idea how to operate on the form from the context of the controller (the view was using this.getForm()).

Here is what I have so far,

Ext.define('LoginExample.controller.LoginController', {
    extend: 'Ext.app.Controller',


    onLoginButtonClick: function(button, e, options) {
        console.log('button clicked');


        if (this.getForm().isValid()) {
            this.getForm().submit({
                url: 'login.php',
                success: function(form, action) {
                    Ext.Msg.alert('Login Successful!');
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Login Failed!');
                }
            });
        }
    },


    init: function() {
        this.control({
            "#loginButton": {
                click: this.onLoginButtonClick
            }
        });
    }

});

Obviously the this in the context of onLoginButtonClick is no longer the view and is instead the controller.

Given the parameters given to me, (Ext.button.Button button, Event e, Object options), how do I get the submit on the appropriate form?

I should note this using ExtJS 4.

Answer 1

button.up('form');

will do the trick.

To get the BasicForm object to operate on, use

button.up(‘form’).getForm()