Extjs: how to get values of a form

Question

I'm new on Extjs and I'm trying to create a simple Login form with just one field, but I'm not able to get the value of that field.

Specifically, I call my Login panel from a Main.js:

Ext.define('appTrial.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',

requires: [
    'Ext.TitleBar',
    'Ext.Video',
    'appTrial.view.Login',
],

controllers: [
              'AssociaAttivitaController'
          ],

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Welcome to My New App!!!',
            },{
                xtype: 'container',
                name: 'mainContainer',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                },

                items: [{
                    xtype: 'Login',
                    title:'Login',     //call Login here
                    margin: '80 0 0 0'
                },
              ]
            }
            ]
        },     
        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Getting Started'
                },
                /*{
                    xtype: 'video',
                    url: 'xxx'
                }*/
            ]
        }]
}
});

When I create a Login.js like this, I can see the panel, but it does not get the value:

Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
        title: 'Login',
        width: 200,
        height: 200,

        items: [{
            xtype: 'container',
            name: 'loginContainer',
            layout: {
                type: 'vbox',
                align: 'center',
                pack: 'center',
            },

            items: [{
                    layout: {
                        pack: 'center'
                    },
                    html :'Associa attivita'
                },            
                {
                    xtype: 'fieldset',                
                    items: [{
                        xtype: 'textfield',
                        name: 'codAttivita',
                    }]
                },
                {
                     xtype: 'toolbar',
                     layout: {
                         pack: 'center'
                     }, // layout
                     ui: 'plain',
                     items:[{
                         xtype: 'button',
                         text: 'Associa',
                         ui: 'confirm',
                         action: 'login',   
                     },{
                         xtype: 'button',
                         text: 'Reset',
                         ui: 'decline',
                         handler: function (btn, evt) {
                             var cod = codAttivita.getValue(); //here, the cod is null

                             Ext.Msg.confirm('', 'Are you sure you want to reset this form?',   function (btn) {
                                 if (btn === 'yes') {
                                     form.setValues({
                                         codAttivita: ''
                                     });

                                 } 
                             }); 
                         }
                  }]
          }],
     }]
},
});

Reading other topics, I understood that I have to assign the form to a variable; I did it, but with the following Login.js I don't see the panel at all:

var formPanel = Ext.create('Ext.form.Panel', {
name: 'loginForm',

/*  defaults:{
    layout: 'form',
    xtype: 'container',
    //defaultType: 'textfield',
    labelWidth: 150,
    width: 300
},*/

items:[{
    xtype: 'container',
    name: 'loginContainer',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center',
    },  
    items: [{
        layout: {
            pack: 'center'
        },
        html :'Associa attivita'
    },            
    {
        xtype: 'fieldset',                
        items: [{
            xtype: 'textfield',
            name: 'codAttivita',
            id: 'codAttivita',
            allowBlank: false
        }]
    }]
}]  
});


Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
        title: 'Login',
        width: 200,
        height: 200,

        items: [{
            xtype: 'container',
            name: 'loginContainer',
            layout: {
                type: 'vbox',
                align: 'center',
                pack: 'center',
            },

            items: [
                    formPanel
            ],

            buttons: [{
                text:'Associa',
                ui: 'confirm',
                action: 'login',
            },{
                text: 'Reset',
                ui: 'decline',

                handler: function (btn, evt) {
                    var form = formPanel.getForm();
                    var cod = form.findField('codAttivita');

                    Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function    (btn) {
                        if (btn === 'yes') {
                         form.setValues({
                             codAttivita: ''
                         });

                        } 
                    }); 
                }
              }]            
     }]
},
});

Does anyone have any idea??

Thanks in advance

Answer 1

Just so you know, aliases by convention are all lowercase (see: http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid, bullet point #8).

You can assign an id to the login form in the config.

{
  xtype: 'login',
  id: 'login-form',
  title:'Login',     //call Login here
  margin: '80 0 0 0'
}

You can then query the form by id to get the values:

Ext.getCmp('login-form').getValues();

If you don't give the form an id, you can also query for the component by xtype:

Ext.ComponentQuery.query('login')[0].getValues();