运行 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
    }
}

这里是选项卡 container/content 的示例定义。您可以注意到，我在上面的每个选项卡中使用此容器的别名 "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 中每个选项卡中的相同代码

Run same code in each tab in extjs

tabs

extjs

panel