PR3: form.Panel isn't displayed?

[teedev]

Hi I am using Sencha Touch PR3. I have a Panel which contains another Panel with html content and a form.Panel. The form.Panel contains a form.FieldSet. The panel with html content is displayed. But the form.Panel (=panelLogin) is not visible. Why? In Sencha Touch 1.x it works. Thanks in advance.

var fsLogIn = Ext.create('Ext.form.FieldSet', {
    title : 'Enter login data',
    items : [{
        xtype : 'textfield',
        name : 'sessionName',
        label : 'Session'
    }]

});

var panelLogin = Ext.create('Ext.form.Panel', {
    standardSubmit : false,
    items : [fsLogIn, {
        xtype : 'button',
        text : 'Login',
        ui : 'action',
        scope : this,
        handler : function() {
            panelLogin.submit();
        },
    }],

    submit : function() {
        //do something
    }
});

Ext.define('VoteApp.view.LoginView', {
    extend : 'Ext.Panel',
    xtype : 'voteapp-loginview',
    config : {
        items : [{
            xtype : 'panel',
            html : 'Test',
            height : 90
        }, panelLogin]
    },
});

[mitchellsimoens]

I wouldn't use Ext.create outside of Ext.setup. I wouldn't use Ext.define inside of Ext.setup. You can simplify your code by combining into one:

Ext.define('VoteApp.view.LoginView', {
    extend : 'Ext.Panel',
    xtype  : 'voteapp-loginview',

    config : {
        items : [
            {
                xtype  : 'panel',
                html   : 'Test',
                height : 90
            },
            {
                xtype : 'formpanel',
                items : [
                    {
                        xtype : 'fieldset',
                        title : 'Enter login data',
                        items : [
                            {
                                xtype : 'textfield',
                                name  : 'sessionName',
                                label : 'Session'
                            },
                            {
                                xtype   : 'button',
                                text    : 'Login',
                                ui      : 'action',
                                handler : function(btn) {
                                    var form = btn.up('formpanel');

                                    form.submit();
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

But the problem is your form needs a height either by setting the height config on the formpanel or by using a layout. I would choose to use a layout:

Ext.define('VoteApp.view.LoginView', {
    extend : 'Ext.Panel',
    xtype  : 'voteapp-loginview',

    config : {
        layout : {
            type  : 'vbox',
            align : 'stretch'
        },
        items : [
            {
                xtype  : 'panel',
                html   : 'Test',
                height : 90
            },
            {
                xtype : 'formpanel',
                flex  : 1,
                items : [
                    {
                        xtype : 'fieldset',
                        title : 'Enter login data',
                        items : [
                            {
                                xtype : 'textfield',
                                name  : 'sessionName',
                                label : 'Session'
                            },
                            {
                                xtype   : 'button',
                                text    : 'Login',
                                ui      : 'action',
                                handler : function(btn) {
                                    var form = btn.up('formpanel');

                                    form.submit();
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Please notice the lines in red. Now you should be able to see the form.

[teedev]

Great, this works!

But this little thing isn't working anymore (works in 1.x)

{
        xtype : 'textfield',
        name : 'sessionName',
        label : 'Session',
        value : 'ABC'
}

This sets the default text of the textfield to ABC. The user can modify it. But

form.getFields('sessionName').getValue();

always returns ABC. The user input is ignored.

Second bug: The form can't be posted with if you hit the enter/return key while the textfield has the focus.

[mitchellsimoens]

The getValue is an open bug against PR3: http://www.sencha.com/forum/showthread.php?161412