Sencha Touch 2.x表单面板宽度/布局

Question

我已经开始使用具有基本登录表单的应用程序，但是当使用formpanel xtype时，组件的宽度基本上是其父容器宽度的两倍

例如：

如果我只是将xtype: 'formpanel'更改为xtype: 'panel'，那么它非常适合：

我的问题是：
如果我只使用xtype: 'panel'而不是'formpanel'，我会失去任何主要的内置功能吗？考虑到我已经计划用我的自定义东西覆盖任何Sencha验证。

我认为任何能解决宽度问题的人都不会要求我使用xtype: 'panel'。

代码如下：

Ext.define('MyApp.view.LoginDetails',{
    extend: 'Ext.Container',
    requires: [
        'Ext.Button',
        'Ext.TitleBar',
        'Ext.form.Panel',
        'Ext.field.Text',
        'Ext.field.Email',
        'Ext.field.Select',
        'Ext.field.Toggle',
        'Ext.MessageBox'
    ],
    config:{
        layout: 'card',
        showAnimation: 'fadeIn',
        cls: 'view-login-details',
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            html: 'Titlebar',
            items: [{
                xtype: 'button',
                ui: 'back',
                html: 'Back',
                cls: 'btn-login-details-back',
                id: 'login-details-back'
            }]
        },{
            xtype: 'panel', // OR formpanel
            flex: 1,
            cls: 'login-details-form',
            items: [{
                xtype: 'textfield',
                name: 'first_name',
                placeHolder: 'First Name',
                required: true
            },{
                xtype: 'textfield',
                name: 'last_name',
                placeHolder: 'Last Name',
                required: true
            },{
                xtype: 'emailfield',
                name: 'email',
                placeHolder: 'Email',
                required: true
            },{
                xtype: 'selectfield',
                placeHolder: 'City',
                required: true,
                options: [
                    {text: 'Auckland', value: 'Auckland'},
                    {text: 'Wellington', value: 'Wellington'},
                    {text: 'Christchurch', value: 'Christchurch'},
                    {text: 'Other', value: 'Other'}
                ],
                listeners: {
                    change: function(item,newValue,oldValue,event){
                        if(newValue === 'Other'){
                            Ext.Msg.alert('City Selection', 'There are only items in Auckland, Wellington and Christchurch');
                        }
                    }
                }
            },{
                xtype: 'togglefield',
                name: 'terms_conditions',
                label: 'I have read and agree to the Terms & Conditions and Privacy Policy',
                labelAlign: 'right'
            },{
                xtype: 'togglefield',
                name: 'opt_in',
                label: 'I would like to opt-in to ongoing communication from X and Y',
                labelAlign: 'right'
            },{
                xtype: 'button',
                text: 'Get Started',
                cls: 'btn-banner',
                id: 'login-details-get-started'
            }]
        }]
    }
});