Results 1 to 2 of 2

Thread: Form Layout Issue in Sencha Touch 2.1.1

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Answers
    5

    Default Form Layout Issue in Sencha Touch 2.1.1

    I am trying to put a form with enough input fields to scroll the page inside a panel. This was possible in 2.0.2 with the following code, but now seems impossible in 2.1.1.
    Is there anyway to achieve this layout in 2.1.1? If not would the best solution be to replace forms with panels and fix whatever issue that causes?

    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
    Thanks

    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,
    //                layout:"vbox", // This causes overflow hidden
                    items:[
                        {
                            docked:'top',
                            xtype:'titlebar',
                            title:'Welcome to Sencha Touch 2'
                        },
                        {
                            xtype:"panel",
    //                        flex:1, // Use with vbox
                            layout:"fit",
                            items:[
                                {
                                    xtype:"formpanel",// if xtype is panel then there is no issue
                                    flex:1,
    //                                scrollable:false, // Use with vbox
                                    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
    //                        flex:1, // Use with vbox
    //                        scrollable:false, // Use with vbox
                            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"
                        }
                    ]
                }
            ]
        }
    });

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Answers
    5

    Default

    Looks like I'll need to replace forms with panels. I'll add a bug report for this.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •