You found a bug! We've classified it as TOUCH-4153 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Vote Rating
    0
    sissonb is on a distinguished road

      0  

    Default Form Layout Issue in Sencha Touch 2.1.1

    Form Layout Issue in Sencha Touch 2.1.1


    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

    Code:
    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"
                        }
                    ]
                }
            ]
        }
    });
    Last edited by sissonb; 20 Mar 2013 at 11:30 AM. Reason: simplified example

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Vote Rating
    0
    sissonb is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    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

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      1  

    Default


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

    Code:
                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

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Vote Rating
    0
    sissonb is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    Ok, So we are just doing block type layouts the whole way. No vbox is necessary at all:

    Code:
                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.