Question

I am new to sencha touch and I am having trouble loading a form into a view.

In my app.js I am loading the main view as such

Ext.Viewport.add(Ext.create('app.view.Main'));

My full app.js is as follows

Ext.application({
    name: 'app',

    requires: [
        'Ext.MessageBox',
        'Ext.form.FieldSet',
    ],

    views: ['Main'],


    launch: function() {

        // Initialize the main view
        Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
    },
});

My main view is:

Ext.define("app.view.Main", {
    extend: 'Ext.Container',
    config:{
        items:[
            form
        ]
    }
});

var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        },
        {
            xtype: 'emailfield',
            name: 'email',
            label: 'Email'
        },
        {
            xtype: 'passwordfield',
            name: 'password',
            label: 'Password'
        }
    ]
});

I took the form from the official documentation and the form doesn’t load for some reason. So how can I add the form to my main view?

Answer 1

First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-

1.) In app.js

    Ext.Viewport.add(Ext.create('app.view.Main'));

2). In Main.js

            Ext.define("app.view.Main", {
                extend: 'Ext.Container',
                config:{
                    items:[
                       {
                         xtype: form
                       }
                    ]
                }
            });

            var form = Ext.create('Ext.form.Panel', {
                fullscreen: true,
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }
                ]
            });

But i will not prefer to call the formpanel in the way you are doing.
Rather you can follow ARolek answer OR follow this approach :-

1) app.js

        Ext.application({
            name: "app",
            views: ["Main","second"],

            launch: function () {

                Ext.Viewport.add(Ext.create('app.view.Main'));
            }
        });

2) Main.js

        Ext.define("app.view.Main", {
         extend: "Ext.Container",
         requires:["app.view.second"],
         config:{
            fullscreen: true,
              layout: 
                    {
                    type: 'fit'
                    },
                items:[
                  {
                    xtype: "form"
                  }
                ]
            }
        });

3) second.js

        Ext.define("app.view.second", {
        extend: "Ext.form.Panel",
        requires:['Ext.form.FieldSet','Ext.Toolbar'],
        alias: "widget.form",
        config:
        {
            items: 
            [       
                {
                    xtype: 'fieldset',
                    title: 'About You', 
                   items: [             
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }
                    ]
                }
            ]
        }           
        });