Sencha Touch formpanel does not create form element

Question

I'm working through some of the sencha touch getting started code.

One of the things I'm trying to do is create a contact form tab panel.

I've defined my panel class which includes a formpanel in it. When I load the page, the fieldset gets created but the formpanel does not create a form element:

Ext.define('ScoreKeeper.view.tabs.Contact',{
    extend : 'Ext.Panel',
    xtype  : 'ContactTab',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Email',
        'Ext.field.TextArea'
    ],
    config : {
        title   : 'Contact Form',
        id      : 'contactForm',
        iconCls : 'user',
        xtype   : 'formpanel',
        url     : 'contact.php',
        layout  : 'vbox',
        items   : [
            {
                xtype        : 'fieldset',
                title        : 'Contact Us',
                instructions : '(email address is optional)',
                height       : 285,
                items        : [
                    {
                        xtype: 'textfield',
                        label: 'Name'
                    },{
                        xtype: 'emailfield',
                        label: 'Email'
                    },{
                        xtype: 'textareafield',
                        label: 'Message'
                    }
                ]
            },{
                xtype : 'button',
                text  : 'Send',
                name  : 'contactSubmit',
                ui    : 'confirm'
            }
        ]
    }
});

When I inspect the code form the example in the documentation for the form panel class it definitely creates a form element. I'm not getting any console errors, it doesn't get created.

What am I missing?

Answer 1

Your syntax is not correct : You use the config field of your Panel as a items field.

You should either

• Specify your ScoreKeeper.view.tabs.Contact as extend : 'Ext.form.Panel' and remove the xtype line from your config

or

• Specify the formpanel object in the items of your Panel, and put your fieldset in the items of your formpanel.

Code for 1rst solution (best imo) :

Ext.define('ScoreKeeper.view.tabs.Contact',{
    extend : 'Ext.form.Panel',
    xtype  : 'ContactTab',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Email',
        'Ext.field.TextArea'
    ],
    config : {
        title   : 'Contact Form',
        id      : 'contactForm',
        iconCls : 'user',
        // xtype   : 'formpanel',
        ...
});