Sencha touch form panel is not showing

Question

For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...

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

    config: {
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'My Title'
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                items: [

                    {
                        xtype: 'button',
                        text: 'Call'
                    },
                    {
                        xtype: 'button',
                        text: 'Email'
                    }                       
                ]
            },
            {
                xtype: 'container',
                flex: 1,
                border: 2,
                items: [
                    {
                        xtype: 'formpanel',
                        styleHtmlContent: true,
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'MyFieldSet',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        label: 'Field'
                                    },
                                    {
                                        xtype: 'textfield',
                                        label: 'Field'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

});

score 4 · Answer 1 · edited May 23 '17 at 12:23

4

To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property

{
    xtype: 'formpanel',
    scrollable: null,         
    items: [
        ...
    ]
}

See discussion here

edited May 23 '17 at 12:23

Community

1
1

answered Dec 23 '14 at 10:47

Vitalii Blagodir

939
9
7

score 2 · Accepted Answer · edited May 09 '13 at 22:01

2

Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.

Check this link for more info about layouts in Sencha Touch.

edited May 09 '13 at 22:01

Sumner Evans

8,951
5
30
47

answered Nov 23 '12 at 23:27

weerd2

690
1
5
18

'of the containers' which ones ? – Titouan de Bailleul Nov 24 '12 at 09:35
Both containers;) I've edited the answer for more clarity. Thanks. – weerd2 Nov 24 '12 at 10:30
It actually only need a layout: 'fit' on the container containing the formpanel – Titouan de Bailleul Nov 24 '12 at 10:38
Yes, you're right. I was checking it in Architect for myself and I forgot to set the `flex` property on the container containing the formpanel when the Login view has a `vbox` layout. If the `flex` property is not set, then both containers should have `layout: 'fit'`. – weerd2 Nov 24 '12 at 11:05
1

Actually, since I marked this correct why doesn't flex: 1 have the same effect as fit if there is nothing else inside the container? – jaffa Nov 26 '12 at 20:35

Sencha touch form panel is not showing

2 Answers2