-1

我正在尝试创建一个包含多个表单面板（5）的视图，每个表单面板都有一个字段集，但是从我读过的内容来看，一个视图只能包含 1 个表单面板，当我设置 5 时，只显示第一个。

最初我使用具有多个字段集的视图并获得了我想要的外观，但是，此解决方案不允许我将存储记录设置到这些字段集，因此我可以在同一视图中管理多个记录，因此我不得不尝试制作这些字段集有一个父窗体，因此我的问题开始了。

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 获得具有多个窗体的视图的任何想法？

4

1 回答 1

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: [
            ...
        ]
    }
});

通过这种方式，您将在视图中垂直放置窗体，使它们具有相同的高度。PS：从中删除“x-floating”类。

但是，如果您想使用卡片布局（这似乎是最好的解决方案），我建议您为所有表单面板提供不同的“itemId”配置参数。

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

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

.setRecord(<YOUR_RECORD>);

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

于 2013-01-08T17:28:10.893 回答