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

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

我在 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',tabConfig: {
                    tooltip: 'Test 2'
                },items: {
                    xtype: 'Test2Panel'
    
                }
            }
    
            
            };
            me.callParent();
        }
    });

解决方法

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