Ext JS TabPanel 防止重複打開標籤頁的最佳實踐

問題場景

使用 Ext.getCmp("myTabPanel").add() 動態添加標籤頁時，若用戶重複點擊同一菜單，會創建多個相同 ID 的標籤頁，導致界面混亂。

原始代碼缺陷

function addTab(href) {
    var id = parseInt(href.substr(31, 6));
    var task = href.substr(26, 11);
    parent.Ext.getCmp("myTabPanel").add({
        id: id,
        title: task,
        closable: true,
        iconCls: 'Feed',
        html: '<iframe src="'+href+'" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>'
    });
    parent.Ext.getCmp("myTabPanel").setActiveTab(id);
}

每次調用直接 add，不檢查標籤是否已存在。

解決方案：先判斷後操作

function addTab(href) {
    var id = parseInt(href.substr(31, 6));
    // 1. 檢查標籤是否已存在
    if (Ext.getCmp(id)) {
        parent.Ext.getCmp("myTabPanel").setActiveTab(id);  // 存在則直接激活
        return;
    }
    // 2. 不存在則創建新標籤
    var task = href.substr(26, 11);
    parent.Ext.getCmp("myTabPanel").add({
        id: id,
        title: task,
        closable: true,
        iconCls: 'Feed',
        html: '<iframe src="' + href + '" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>'
    });
    parent.Ext.getCmp("myTabPanel").setActiveTab(id);
}

關鍵點解析

• Ext.getCmp(id)：通過組件 ID 全局查找，若返回非 undefined 則標籤已存在。
• 提前 return 避免重複創建，提升性能並防止 ID 衝突報錯。
• 保持 id 提取邏輯一致（此處從 URL 解析），確保同一業務功能對應唯一 ID。

進階建議

1. 使用 Ext.tab.Panel 的 getComponent(id) 替代全局 Ext.getCmp，範圍更精確。
2. 為 iframe 添加 loadmask 或 listeners 處理跨域、加載失敗等情況。
3. 考慮使用 Ext.state.Manager 持久化標籤狀態（如用戶上次打開的標籤）。

總結

「配置 id，判斷存在就激活，否則再添加」是 Ext JS TabPanel 防重複的標準模式，代碼簡潔且健壯，推薦作為項目規範。