Form Layout Issue in Sencha Touch 2.1.1

[sissonb]

There was a layout bug introduced in 2.1.1 for forms. Forms can no longer be be stacked and scrolled like they can in 2.0.2.

In 2.0.2 this layout scroll all the items. In 2.1.1 it breaks.

Here are some screencasts of 2.1.1 issues

Screencast witout vbox - http://screencast.com/t/YFfIZL8q6LM
Screencast with vbox - http://screencast.com/t/cUODNs5hL
Screencast replacing formpanel with panel - http://screencast.com/t/ooqdbZBooopL

Workaround - Don't use formpanels

Ext.define('path.view.Main', {    
    extend:'Ext.tab.Panel',
    xtype:'main',
    requires:[
        'Ext.TitleBar'
    ],
    config:{
        tabBarPosition:'bottom',
        items:[
            {
                title:'Welcome',
                iconCls:'home',
                styleHtmlContent:true,
                scrollable:true,
                items:[
                    {
                        docked:'top',
                        xtype:'titlebar',
                        title:'Welcome to Sencha Touch 2'
                    },
                    {
                        xtype:"formpanel", // if xtype is panel then there is no issue
                        items:[
                            {
                                xtype:"textfield",
                                placeHolder:'Username'
                            },
                            {
                                xtype:"passwordfield",
                                placeHolder:'Password'
                            },
                            {
                                xtype:"textfield",
                                placeHolder:'Username'
                            },
                            {
                                xtype:"passwordfield",
                                placeHolder:'Password'
                            },
                            {
                                xtype:"textfield",
                                placeHolder:'Username'
                            },
                            {
                                xtype:"passwordfield",
                                placeHolder:'Password'
                            },
                            {
                                xtype:"textfield",
                                placeHolder:'Username'
                            },
                            {
                                xtype:"passwordfield",
                                placeHolder:'Password'
                            }
                        ]
                    },
                    {
                        html:"This should be hidden until i scroll to the bottom"
                    }
                ]
            }
        ]
    }
});

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[Jamie Avins]

I understand the change here was intentional to not give so much auto-height capability to vbox as the performance implications af doing this are dramatic.

But what exactly are you using vbox for in this case? The flex doesn't do anything since there are more items than can fit in this case. So flex is becoming max-height. A natural block layout seems to be more proper in this case.

[sissonb]

I understand the change here was intentional to not give so much auto-height capability to vbox as the performance implications af doing this are dramatic.

But what exactly are you using vbox for in this case? The flex doesn't do anything since there are more items than can fit in this case. So flex is becoming max-height. A natural block layout seems to be more proper in this case.

Hey Jamie,

I was using vbox to attempt to get the form to show something. I really want the layout to work as it is without the flexs and vbox layout (they are commented out) like it did in 2.0.2.

If you replace the formpanel with a panel the textfields show up correctly, otherwise they're hidden. It seems the natural block layout is broken from formpanels.

Edit -
I simplified the example

[Jamie Avins]

Ok, So we are just doing block type layouts the whole way. No vbox is necessary at all:

            Ext.define('Main', {
                extend:'Ext.tab.Panel',
                xtype:'main',
                requires:[
                    'Ext.TitleBar'
                ],
                config:{
                    tabBarPosition:'bottom',
                    items:[
                        {
                            title:'Welcome',
                            iconCls:'home',
                            styleHtmlContent:true,
                            scrollable:true,
                            items:[
                                {
                                    docked:'top',
                                    xtype:'titlebar',
                                    title:'Welcome to Sencha Touch 2'
                                },
                                {
                                    xtype:"panel",
                                    items:[
                                        {
                                            xtype:"formpanel",// if xtype is panel then there is no issue
                                            scrollable: null,
                                            items:[
                                                {
                                                    xtype:"textfield",
                                                    placeHolder:'Username'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"textfield",
                                                    placeHolder:'Username'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    xtype:"formpanel", // if xtype is panel then there is no issue
                                    scrollable: null,
                                    items:[
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        }
                                    ]
                                },
                                {
                                    html:"This should be hidden until i scroll to the bottom"
                                }
                            ]
                        }
                    ]
                }
            });

Note that the default for a FormPanel is to have it scrollable, but in your case we don't want that so we have `scrollable: null` for them. All the items now will flow as block items

[Jamie Avins]

As for the formpanels, since they default to scrollable, you would need to give them size in some way if you want that behavior. For the case as you listed it, it seems that not having any scrolling at ll is more appropriate.

[sissonb]

Ok, So we are just doing block type layouts the whole way. No vbox is necessary at all:

            Ext.define('Main', {
                extend:'Ext.tab.Panel',
                xtype:'main',
                requires:[
                    'Ext.TitleBar'
                ],
                config:{
                    tabBarPosition:'bottom',
                    items:[
                        {
                            title:'Welcome',
                            iconCls:'home',
                            styleHtmlContent:true,
                            scrollable:true,
                            items:[
                                {
                                    docked:'top',
                                    xtype:'titlebar',
                                    title:'Welcome to Sencha Touch 2'
                                },
                                {
                                    xtype:"panel",
                                    items:[
                                        {
                                            xtype:"formpanel",// if xtype is panel then there is no issue
                                            scrollable: null,
                                            items:[
                                                {
                                                    xtype:"textfield",
                                                    placeHolder:'Username'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"textfield",
                                                    placeHolder:'Username'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                },
                                                {
                                                    xtype:"passwordfield",
                                                    placeHolder:'Password'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    xtype:"formpanel", // if xtype is panel then there is no issue
                                    scrollable: null,
                                    items:[
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        },
                                        {
                                            xtype:"textfield",
                                            placeHolder:'Username'
                                        },
                                        {
                                            xtype:"passwordfield",
                                            placeHolder:'Password'
                                        }
                                    ]
                                },
                                {
                                    html:"This should be hidden until i scroll to the bottom"
                                }
                            ]
                        }
                    ]
                }
            });

Note that the default for a FormPanel is to have it scrollable, but in your case we don't want that so we have `scrollable: null` for them. All the items now will flow as block items

Thanks Jamie. Never tried setting scrollable to null, only to false. That fixes it.

It might make sense to have scrollable default to null on forms.