Question

我希望在标签式面板的每个标签中都有相同的表单面板。是否有一种方法可以为每个选项卡运行相同的代码，而无需复制项目列表中的代码，因为这将是多余的。

Answer 1

这是一种方法 -

您通常会定义一个tabpanel，并将多个面板作为一个项目数组。对于项目内的每个面板，将下面定义的相同面板容器作为项目。

{
    xtype: 'tabpanel',
    itemId: 'myTabPanel',
    activeTab: 0,
    plain: true,
    items: [{
        xtype: 'panel',
        itemId: 'tab1',
        layout: 'fit',
        title: 'Strategies',
        items: [{
            xtype: 'myTabContainer'
        }],
        tabConfig: {
            xtype: 'tab',
            closable: false
        }
    }, {
        xtype: 'panel',
        itemId: 'tab2',
        layout: 'fit',
        title: 'Action Sets',
        items: [{
            xtype: 'myTabContainer'
        }]
    }],
    listeners: {
        tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
    }
}

以下是该选项卡的容器/内容的示例定义。您可以注意到，我在上面的每个选项卡中都将此容器“myTabContainer”的别名用作xtype。这将确保相同的视图链接到两个选项卡。

Ext.define('MyTabContainer', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.myTabContainer',

            requires: [
                // give all required classes
            ],

            viewModel: {
                type: 'dfstrategiesmaincontainer'
            },
            itemId: 'tabContent',
            layout: 'border'

            // Define all other required items and contents
        }

Answer 2

定义表单并将该表单设置为每个选项卡中的项目。

//Define the form
Ext.define('App.view.MyForm', {
        extend:'Ext.form.Panel',  
        alias: 'widget.myform',  
        bodyPadding:10,
        items: [....]        
});

//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'Tab1',
        xtype: 'myform'
    }, {
        title: 'Tab2',
        xtype: 'myform'
    }]
});

在extjs的每个选项卡中运行相同的代码

2 个答案: