sencha-touch-2.2

Form not showing in sencha 2.2


I'm able to show the form inside the container. I used to add it like this...

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'
        }
    ]
});

Ext.define('MyApp.view.Login',{
    extend: 'Ext.Container',
    alias: 'widget.login',

    config:{
        items:[
            form
        ]
    }
});

The first part of the code was taken from sencha 2.2 docs, but still got no results...

I've also tried to use Ext.define and assigning an alias to use the xtype inside items, but nothing happens.

Is is ok to use a Container to wrap the formpanel? or should I move to Panel?

BTW, I have my project configured with Sencha Touch 2.2 and PhoneGap 2.9 and the problem occurs when I tested on xcode

Thanks in advance.


Solution

  • You problem may stem from trying to use Ext.define to define a class, mixed with Ext.create to create an instance. Why are you trying to wrap the form in a container? You should be able to just move your items from the form into your login panel, and have that class extend Ext.form.Panel, like this:

    Ext.define('MyApp.view.Login', {
        extend: 'Ext.form.Panel',
        xtype: 'widget.login',
        config: {    
            items: [
                {
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },
                {
                    xtype: 'emailfield',
                    name: 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }
            ]
        }
    });
    

    If you must wrap, then try just defining a new class for your form as an extension of Ext.form.Panel (rather than using an instance), then use { xtype: 'loginform' } in the items of your MyApp.view.Login.