ExtJS 5 Button 報錯：方法不存在的排查與 API 核對

問題現象

ExtJS 5 專案中按鈕調用某方法報錯，截圖顯示「不存在該函數調用」。

核心原因

ExtJS 版本差異導致 API 變更。ExtJS 3/4/5/6/7 之間 Config、Method、Event 名稱常有調整。常見情況：

• 方法重命名 (如 setText → setHtml 某些組件)。
• 配置項廢棄 (如 renderTo 行為變化)。
• 類層級結構調整 (如 Ext.Button → Ext.button.Button)。

排查步驟

1. 查閱官方文檔： 打開 Ext JS 5.1 API Docs，搜索 Ext.button.Button。
2. 對比代碼與文檔： 確認調用的方法名、參數類型、返回值是否與文檔**完全一致**。
3. 檢查拼寫大小寫： JavaScript 區分大小寫，getEl() ≠ getEL()。
4. 確認對象類型： 確保調用者確實是 Button 實例，而非 Container 或 Component 基類。
5. 控制台調試： 瀏覽器 F12 Console 輸入 console.log(btn)，展開 __proto__ 查看實際可用方法。

常見 ExtJS 5 Button 正確用法

var btn = Ext.create('Ext.button.Button', {
    text: '點擊我',
    renderTo: Ext.getBody(),
    handler: function(btn, e) {
        // 正確：在 handler 內部訪問按鈕實例
        btn.setText('已點擊'); // API 存在
        btn.disable();         // API 存在
        // btn.notExistMethod(); // 錯誤：不存在
    }
});

// 或在 Controller 中
// refs: [{ ref: 'myBtn', selector: 'button[action=myAction]' }]
// this.getMyBtn().setText('新文本');

避坑建議

• **鎖定版本**：專案 package.json 或 app.json 明確指定 ExtJS 版本號。
• **使用 IDE 智能提示**：WebStorm/VsCode 安裝 ExtJS 類型定義 (@types/extjs)，編碼時即可發現不存在方法。
• **避免私有屬性/方法**：代碼中勿使用以下劃線開頭的私有成員 (如 _somePrivate)，升級必破。