ExtJS TabPanel限制选项卡数量的实现思路与代码

在ExtJS开发中，TabPanel组件使用频率极高，尤其常见于各类后台管理系统。然而实际使用时存在一个典型问题：用户每点击一个菜单就打开一个选项卡，随着选项卡数量增多，页面响应变慢、内存占用飙升。因此，如何高效限制同时打开的选项卡数量，成为开发者普遍关注的需求。 最直接的方案是维护一个固定长度的“队列”，每当新增选项卡时，自动关闭最早打开的那个。下面这段代码通过多个变量循环存储选项卡ID，实现了类似队列的效果。

var tabIndex = 'shouye';  
var tabIndex2 = 'shouye';  
var tabIndex3 = 'shouye';  
var tabIndex4 = 'shouye';  
var tabIndex5 = 'shouye';  
var tabIndex6 = 'shouye';  
var tabIndex7 = 'shouye';  

var loadPanel = function(node) {  
    var id = node.id;  
    tabIndex7 = id;  
    var href = node.attributes.href;  
    var text = node.text;  
    var mainPanel = Ext.getCmp('mainPanel');  
    var qtip = node.attributes.qtip;  
    var tab = mainPanel.getComponent(String(id));  

    if(tab) {  
        mainPanel.setActiveTab(tab);  
        return;  
    }  

    tab = mainPanel.add(new Ext.Panel ({  
        id : String(id),  
        title : text,  
        tabTip : text,  
        html : '