JavaScript unable to get reference to form in ExtJS 5

Question

I have a login form and I am using ExtJS 5. I am trying to use functions I have used in 4+ to get a reference to the form but with no luck.

Below is the form:

Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.tip.QuickTipManager'
]);

Ext.define('APP.view.core.forms.Loginform', {
    extend: 'Ext.window.Window',
    xtype: 'form-login',
    id: 'loginForm',


    title: 'Login',
    frame:true,
    width: 320,
    bodyPadding: 10,

    defaultType: 'textfield',

    items: [{
        allowBlank: false,
        fieldLabel: 'Email',
        name: 'email',
        emptyText: 'test@example.com'
    }, {
        allowBlank: false,
        fieldLabel: 'Password',
        name: 'password',
        emptyText: 'password',
        inputType: 'password'
    }],

    buttons: [{
            text:'Login',
            action: 'loginSubmit'
        }],

    initComponent: function() {
        this.defaults = {
            anchor: '100%',
            labelWidth: 120
        };

        this.callParent(arguments);
    }
});

And here is my controller (I know not the MVVM way which ExtJS 5 adopts):

init: function() {
    this.control({
        // Login form button
        'button[action=loginSubmit]' : {
            click: this.loginAction
        }
    });
},

loginAction: function(button, event) {
      console.info('login button interaction.');
        // Reference to the the window
        var loginWindow = button.up('window');
        var loginForm = loginWindow.down('form-login');
        console.log(loginForm.getValues());

        var loginMask = new Ext.LoadMask({
            target: Ext.getCmp('loginForm'),
            msg: "Please wait."
        }).show();

        // Send AJAX request
        Ext.Ajax.request({
            url: '/user/login',
            method: 'post',
            success: function(response){
                var responseValues = Ext.decode(response.responseText);
                loginWindow.close();
                //Didn't return a 404 or 500 error, hide mask
                loginMask.hide();
                //Show user success message
                Ext.Msg.show({
                    title: 'Login successful',
                    msg: responseValues.msg,
                    buttons: Ext.Msg.OK
                });
                //refresh store from combobox value
                //var store = Ext.getCmp('adminslist').getStore();
                //store.load();
            },
            failure: function(){
                loginWindow.close();
                loginMask.hide();
                Ext.Msg.show({
                    title: 'Login failed',
                    msg: 'Login failed please contact the development team',
                    buttons: Ext.Msg.OK,
                    icon: Ext.Msg.ERROR
                });
            }
        });
    },

This section I am trying to get a reference to the form then to the values...

// Reference to the the window
var loginWindow = button.up('window');
var loginForm = loginWindow.down('form-login');
console.log(loginForm.getValues());

For the time being I have a work around using var email = Ext.getCmp('emailField').getValue(); but I would like to reference the form properly in future so I can get the values all in one go.

The form is returning as null whatever I try, any ideas? :/

Update: Console logs.

var form = Ext.getCmp('loginForm');
console.log(form.getValues());

Output: TypeError: form.getValues is not a function

var form = Ext.getCmp('loginForm');
console.log(form.getForm());

Output: TypeError: form.getForm is not a function

console.log(form);

Output: http://grab.by/yg6C

Answer 1

First of all get rid of any 'id' configs in your code. Second: don't use '-' as literal connectors ('form-login'), use formLogin or FormLogin or formlogin instead. See below why.

There are 2 ways of approaching your problem:

Option 1. fire a custom event in your Login Window

add a widget config setting to the window then you can remove the xtype setting, for you can use the widget setting as the xtype.

widget: 'LoginFormWindow'

add the following to the controller:

refs: [{
   ref: 'LoginFormWindow', // which is the widget
   selector: 'LoginFormWindow'
}...

this.control({
    // Login window
        'LoginFormWindow' : {
             submitform: this.loginAction
        }
    });

handle the button in the window like this:

 buttons: [{
      text:'Login',
      scope: this, // scope on window
      handler: function() {
         var form = this.down('form');
         this.fireEvent('submitform', form); // form is send with the event
      }
 }]

then in your controller:

 loginAction: function(form) {

     formData = form.getForm();

     ....


 }

but better use form.submit() rather than Ajax, because the form.submit is the comfortable way in ext of an Ajax call for forms.

Option 2:

With the window ref still in the controller you can do the following in the function loginAction:

 var window = this.getLoginFormWindow(); // this getter comes with the ref
 var form = window.down('form');
 ... etc ....

NEVER EVER USE 'id' in your programs. Use 'itemId' instead (itemId : 'thisismyitemid'). Why? Because an 'id' has to be unique in the DOM (like an 'id' in HTML).

With 'itemId' you can simply use: this.down('#thisismyitemid'). And therefor 'itemId' only has to be unique within the 'this' instance.

Answer 2

Not sure how you are getting the emailField as you haven't specified and id and Ext defaults to an auto-assigned id? Have you tried using Ext.getCmp('loginForm');?

http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext-method-getCmp

Also I would highly recommend using references http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.app.Controller-cfg-refs which would make getting your form easier in your controller.