如何在 ExtJs 中单击 TabPanel 中的 Tab 菜单时初始化各个选项卡数据？

Posted 2023-02-26

【中文标题】如何在 ExtJs 中单击 TabPanel 中的 Tab 菜单时初始化各个选项卡数据？

【英文标题】：How to initialize the individual tabs data on click on the Tab menu in TabPanel in ExtJs?

【发布时间】：2021-07-20 12:30:41

【问题描述】：

我在 Ext Js 4 中有一个标签面板，并且有几个标签。我为每个选项卡都有独立的面板，并且通过 xtype 链接到选项卡。

现在的问题是每个选项卡的所有 api 调用都会在选项卡面板加载后立即执行服务器，这不符合我的要求。一旦相应的选项卡被激活，我想再次为该选项卡重新加载所有内容。

Ext.define('Test.AbcTabPanel', 
        extend: 'Ext.tab.Panel',
        alias: ['widget.abcTabPanel'],
        requires: [
            'Test.Test1Panel',
            'Test.Test2Panel'
        ],
        width: '100%',
        activeTab: 'test1',
        initComponent: function () 
            var me = this;
    
            me.items = [
                title: 'Test 1',
                itemId: 'test1',
                flex: 1,
                border: true,
                items: 
                    xtype: 'test1Panel',
                    form: me
                
            , 
                title: 'Test 2',
                itemId: 'test2',
                flex: 1,
                tabConfig: 
                    tooltip: 'Test 2'
                ,
                items: 
                    xtype: 'Test2Panel'
    
                
            
    
            
            ;
            me.callParent();
        
    );

【参考方案1】：

您可以使用beforetabchange 或tabchange 事件来触发选项卡的适当api调用。