What is the correct way to use this.up?

Question

I have a simple Form Panel and cannot seem to access the form by using the this.up command. What is the correct way to use this? All the console.log statements return undefined. I am using the Sencha Architect program and there cannot define an xtype. Instead, I had to use the alias field.

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.contactform',

    config: {
        id: 'MyFormPanel',
        items: [
            {
                xtype: 'fieldset',
                title: 'MyFieldSet1',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Email',
                        name: 'Email'
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'mybutton',
                text: 'MyButton'
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
    },

    onMybuttonTap: function(button, e, eOpts) {
        console.log(this.up('widget.contactform'));
        console.log(this.up('contactform'));
        console.log(this.up('form'));
        console.log(this.up('formpanel'));
        console.log(this.up('form.panel'));
        console.log(this.up('MyFormPanel'));

    }

});

Answer 1

Hmm. Considering from where you are calling it, I think that this is the form panel itself.