Question

New to sencha touch here. I’ve checked out quite a few tutorials online. I am having an issue trying to get the value of a text field. The error I am getting when I click my login button is Uncaught TypeError: Cannot call method 'getValue' of undefined. Does that mean my Ext.getCmp is undefined then? I have this panel wrapped in the regular Ext.setup....onReady:.....

var login = new Ext.Panel({
    height:'auto',
    scroll:'vertical',
    layout:{
        type:'vbox',
        align:'center'
    },
    items:[
        {
            cls:'launchscreen',
            html:logo,
            padding:10
        },
        new Ext.form.FormPanel({
            width:300,
            cls:'loginform',
            items:[
                {
                    xtype: 'fieldset',
                    title: 'Login',
                    items: [
                        {
                            xtype: 'textfield',
                            name : 'username',
                            label: 'Username',
                            labelWidth: 85
                        },
                        {
                            xtype: 'passwordfield',
                            name : 'password',
                            label: 'Password',
                            labelWidth: 85
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Submit',
                    ui: 'confirm',
                    handler:function()
                    {
                        alert(Ext.getCmp('username').getValue());
                    }
                }
            ]
        })
    ]
});

EDIT: I was able to get the value if I set the id property on the text field. I’ve seen some example where the id isn’t set and they get the value based off the name property. So I guess my question now is am I supposed to get the value based off id or name?

Answer 1

Using Ext.getCmp() you have to provide the ID of the element whose value you want. See Sencha API doc’s for this:

getCmp( String id )
This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id
Parameters
id : String
The component id

You can also find the element by name, but I think it is faster by ID but perhaps also a bit expensive for the browser’s engine. Can’t say anything about that really.

Anyway, finding field by name is possible by using findField() method. With this method you should provide the id or name of the field that you want. See API doc: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-findField

Example:

var fieldValue= Ext.getCmp("YourFormID").getForm().findField("FieldName").getValue();