无法拥有多个formpanels的视图（SENCHA TOUCH 2）

Question

我正在尝试使用多个formpanels（5）创建一个视图，每个都有一个fieldset，但是根据我的内容，一个视图只能包含1个formpanel，当我设置5时，只显示第一个。< / p>

最初我使用的是一个包含多个fieldsets的视图，并得到了我想要的外观，但是，此解决方案不允许我将商店记录设置为这些字段集，因此我可以在同一视图中管理多个记录，所以我不得不尝试使这些字段集具有父formpanel，因此我的问题就开始了。

MyConfigView.js：

Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Panel',
alias: 'widget.configview',
config:{
        layout: {
            type: 'card',
            animation:{
                type: 'slide',
                direction: 'left',
                duration: 8000
            }
        },
        items:[
        {
                docked: 'top',
                xtype: 'toolbar',
                ui: 'light',
                title: 'Yadayada', 
                itemId: 'toolbarMyConfigView',
                items: [{
                    xtype: 'button',
                    ui: 'back',
                    text: 'Voltar',
                    action: 'voltarConfigView',
                    itemId: 'toolbarMyConfigViewVoltarBt'
                }

                ]

        },
                    {
                    xtype: 'formpanel',
                    items:[
                    {
                        xtype: 'fieldset',
                        title: 'Yada',
                        id: 'fieldSetAssalto',
                        model: 'Socorro.model.MyModel',
                        cls: 'x-floating',
                        items:[
                            {
                                xtype: 'textfield',
                                name: 'numeroTelefone',
                                label: 'Yada'
                            },
                            {
                                xtype: 'textfield',
                                name: 'mensagem',
                                label: 'Yada'
                            }
                        ]
                    }
                    ]
                },

                {
                xtype: 'formpanel',
                items:[

                    {
                        xtype: 'fieldset',
                        title: 'YADA',
                        itemId: 'fieldSetIncendio',
                        model: 'Socorro.model.MyModel',
                        cls: 'x-floating',

                        items:[
                            {
                                xtype: 'textfield',
                                name: 'numeroTelefone',
                                label: 'yadada'
                            },
                            {
                                xtype: 'textfield',
                                name: 'mensagem',
                                label: 'yaaada'
                            }
                        ]
                    }
                    ]
                },
                {
                xtype: 'formpanel',
                items:[ 
                    {
                        xtype: 'fieldset',
                        title: 'YADADA',
                        itemId: 'fieldSetSequestro',
                        model: 'Socorro.model.MyModel',
                        cls: 'x-floating',

                        items:[
                            {
                                xtype: 'textfield',
                                name: 'numeroTelefone',
                                label: 'Yadaaa'
                            },
                            {
                                xtype: 'textfield',
                                name: 'mensagem',
                                label: 'yadada'
                            }
                        ]
                    }
                    ]
                },
                {
                xtype: 'formpanel',
                items:[
                    {
                        xtype: 'fieldset',
                        title: 'YADA',
                        itemId: 'fieldSetEmedico',
                        model: 'Socorro.model.MyModel',
                        cls: 'x-floating',

                        items:[
                            {
                                xtype: 'textfield',
                                name: 'numeroTelefone',
                                label: 'YADAA'
                            },
                            {
                                xtype: 'textfield',
                                name: 'mensagem',
                                label: 'Yada'
                            }
                        ]
                    }
                    ]
                },
                {
                xtype: 'formpanel',
                items:[
                        {
                            xtype: 'fieldset',
                            title: 'Yada',
                            itemId: 'fieldSetAcidente',
                            model: 'Socorro.model.MyModel',
                            cls: 'x-floating',

                            items:[
                                {
                                    xtype: 'textfield',
                                    name: 'numeroTelefone',
                                    label: 'Yada'
                                },
                                {
                                    xtype: 'textfield',
                                    name: 'mensagem',
                                    label: 'Yada'
                                }
                            ]
                        }


                    ]
                }



]
}

});

关于如何使用Sencha Touch 2获取多个formpanel的视图的任何想法？

Answer 1

这是因为您的MyApp.view.MyConfigView视图应用了“卡片”布局，这种布局允许您只显示一个子视图作为活动。 要在同一视图中显示它们，我建议您按如下方式设置视图配置：

Ext.define('MyApp.view.MyConfigView',{
    extend: 'Ext.Container',
    alias: 'widget.configview',
    config:{
        layout: {
            type: 'vbox',
            align: 'stretch'
        }
        defaults: {
            flex: 1
        },
        items: [
            ...
        ]
    }
});

通过这种方式，您可以在视图中垂直放置formpanel，使它们具有相同的高度。 PS：从中移除'x-floating'类。

但是，如果你想使用卡片布局（这似乎是最好的解决方案），我建议你给所有的formpanels一个不同的“itemId”配置参数。

xtype: 'formpanel',
itemId: 'assalto',
items: [
    ...
]

然后，使用ST MVC架构，逐个获取这些表单，并调用该函数。

.setRecord(<YOUR_RECORD>);

在Sencha的文档上阅读有关ST控制器的更多信息。 http://docs.sencha.com/touch/2-1/#!/guide/controllers