Extjs Sencha Touch 2：向表单面板添加选项卡

我正在尝试将以下选项卡添加到面板的顶部和底部工具栏之间的以下面板中。这是可能的，你能提供一个例子说明这两个文件是如何组合的吗

谢谢你的帮助

专家组：

Ext.define('Myapp.view.Product', {
    extend: 'Ext.form.Panel',
    id: 'productCard',

    config: {
        modal: true,
        hideOnMaskTap: false,
        centered: true,
        height: '95%',
        width: '98%',
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: '',
                id: 'productTitle'
            },
            {
                docked: 'bottom',
                xtype: 'toolbar',
                items: [
                    {
                        text: 'Close',
                        ui: 'back',
                        id: 'closeProductCard'
                    }
                ]
            }
        ]
    }
});

标签

---

好的，我将这两个视图合并到产品视图中。这将显示顶部和底部带有工具栏的选项卡面板。希望这仍然有效，因为它的动态是一个有效的细节页面

！但是，每个选项卡上的切换字段不会显示。是否有其他步骤将每个选项卡的内容添加到面板？谢谢你的帮助，我想这可能是个问题。为什么不将工具栏添加到“选项卡”视图中，将这两个视图合并在一起呢？我曾尝试将选项卡合并到“产品”视图中，但都没有正常工作（选项卡不会显示）。最后，我希望产品视图是一个详细信息页面，根据前面的列表选择，它显示组织到选项卡中的产品信息。我的列表选择正在打开Products视图，但此时我被卡住了。请让我知道，如果这似乎是一个可行的方法，或我的方式离开基地。谢谢你的帮助！

Ext.define('Myapp.view.Tabs', {
extend: 'Ext.tab.Panel',
    requires: [
        'Ext.field.Toggle'
    ],

    config: {
        activeItem: 0,
        tabBar: {
            docked: 'top',
            autoScroll: 'auto',
            ui: 'neutral',
            layout: {
                pack: 'center'
            }
        },
        items: [
            {
                title: 'Tab 1',
                xtype: 'formpanel',
                items: [
                    {
                        xtype: 'fieldset',
                        defaults: {
                            labelWidth: '35%',
                            labelAlign: 'top'
                        },
                        items: [
                            {
                                xtype: 'togglefield',
                                name: 'toggle',
                                label: 'Toggle'
                            }
                        ]
                    }
                ]
            },
            {
                title: 'Tab 2',
                xtype: 'formpanel',
                items: [
                    {
                        xtype: 'fieldset',
                        defaults: {
                            labelWidth: '35%',
                            labelAlign: 'top'
                        },
                        items: [
                            {
                                xtype: 'togglefield',
                                name: 'toggle',
                                label: 'Toggle'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Ext.define('Myapp.view.Product', {
    extend: 'Ext.tab.Panel',
    requires: [
    'Ext.field.Toggle'
    ],

    config: {
        activeItem: 0,
        tabBar: {
            docked: 'top',
            autoScroll: 'auto',
            ui: 'neutral',
            layout: {
                pack: 'center'
            }
        },
        items: [{
            xtype:'toolbar',
            docked:'top'
        }, {
            docked: 'bottom',
            xtype: 'toolbar',
            items: [
            {
                text: 'Close',
                ui: 'back',
                id: 'closeProductCard'
            }
            ]
        },
        {
            title: 'Tab 1',
            xtype: 'formpanel',
            items: [{
                xtype: 'fieldset',
                defaults: {
                    labelWidth: '35%',
                    labelAlign: 'top'
                },
                items: [{
                    xtype: 'togglefield',
                    name: 'toggle',
                    label: 'Toggle'
                }
                ]
            }
            ]
        },{
            title: 'Tab 2',
            xtype: 'formpanel',
            items: [{
                xtype: 'fieldset',
                defaults: {
                    labelWidth: '35%',
                    labelAlign: 'top'
                },
                items: [{
                    xtype: 'togglefield',
                    name: 'toggle',
                    label: 'Toggle'
                }
                ]
            }
            ]
        }
        ]
    }
});