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

Question

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

Answer 1

这是一种方法 -

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

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