Sencha Touch 2 - Get Form values using MVC

Question

My question s in relation to the possible answer in this post Sencha Touch 2 - How to get form values?

Im having the same issue trying to retrieve the values from a form in a View using a Controller.

My current error is Uncaught TypeError: Object # has no method 'getValues'

View:

Ext.define("App.view.Login", {
extend: 'Ext.form.Panel',
requires: [
    'Ext.field.Password'
],
id: 'loginview',

config: {
    items: [{
        xtype: 'titlebar',
        title: 'Login',
        docked: 'top'
    },
    {
        xtype: 'fieldset',
        id: 'loginForm',
        defaults: {
            required: true
        },
        items: [{
            items: [{
                xtype: 'textfield',
                name: 'username',
                label: 'Username:'
            },
            {
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password:'
            }]
        }]
    },
    {
        xtype: 'toolbar',
            layout: {
                pack: 'center'
            }, // layout
            ui: 'plain',
            items: [{
                xtype: 'button',
                text: 'Register',
                id: 'register',
                ui: 'action',
            }, {
                xtype: 'button',
                text: 'Login',
                id: 'login',
                ui: 'confirm',
            }] // items (toolbar)
    }]
}

});

Controller:

Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',

requires: [
    'App.view.Login',
    'Ext.MessageBox'
],

config: {
    refs: {
        loginForm: '#loginForm',
        register: '#register',
        login: '#login'
    },
    control: {
        register: {
            tap: 'loadRegisterView'
        },
        login: {
            tap: 'loginUser'
        }
    },

    history: null
},

loadRegisterView: function(btn, evt) {
    /*var firststep = Ext.create('App.view.Register');
    Ext.Viewport.setActiveItem(firststep);*/
},
loginUser: function(btn, evt) {
    var values = loginForm.getValues();
    console.log(values);
}

});

Thanks

Edit: So the below code works but its not how i see everyone doing it.

var form = Ext.getCmp('loginview');

console.log(form.getValues());

Everyone else does this.getLoginView().getValues(); . I dont understand "this" is in the wrong scope and where would getLoginView even be declared? No one ever includes this information in their snippets. Here is another example Sencha Touch 2 - How to get form values?

Anand Gupta Anand Gupta · Accepted Answer · 2013-11-19T07:49:02

Add xtype in view below the "id":

xtype: 'loginform',

and then replace the reference of loginForm with this:

loginForm: 'loginform',

Your code will work. The mistake you were doing is you were trying to access the method of 'formpanel' in 'fieldset'.

Sencha Touch 2 - Get Form values using MVC

1 Answers