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

Question

我正在尝试将以下标签添加到面板上顶部和底部工具栏之间的以下面板中。这是否可能，请您提供一个如何组合这两个文件的示例？

感谢您的帮助！

面板：

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'
                    }
                ]
            }
        ]
    }
});

标签

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'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Answer 1

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'
                }
                ]
            }
            ]
        }
        ]
    }
});

好的，我将两个视图合并到产品视图中。这将在顶部和底部显示带有工具栏的选项卡面板。希望这仍然适用于它作为详细信息页面的动态