ExtJS GridPanel 動態設置 TextField ID 的最佳實踐

問題場景

在 `tbar` 工具欄中嵌入查詢輸入框，需要將 `id` 從硬編碼改為動態變量，以便多實例復用或動態生成。

解決方案：變量提取法

定義變量保存 ID 字符串，在創建組件與事件處理中統一引用：

var searchFieldId = 'ManagerNumP_' + Ext.id(); // 生成唯一 ID

applyAccount.gridManager = new Ext.grid.GridPanel({
    // ... 其他配置
    tbar: [
        '客戶經理編號：',
        { id: searchFieldId, xtype: 'textfield' }, // 使用變量
        '-',
        {
            text: '查詢',
            handler: function() {
                var val = Ext.getCmp(searchFieldId).getValue(); // 通過 ID 獲取組件
                applyAccount.storeManager.load({
                    params: { managerNum: val, /* 其他參數 */ }
                });
            }
        }
    ]
});

進階技巧：組件引用而非 ID 查找

更推薦直接保存組件引用，避免全局 ID 沖突：

var searchField = new Ext.form.TextField({ /* config */ });
// 在 tbar 中直接使用 searchField
handler: function() { var val = searchField.getValue(); /* ... */ }

總結

使用變量存儲動態 ID 是最簡單的兼容寫法；現代 ExtJS 開發建議採用組件引用或 `itemId` + `down()` 查詢，減少對全局 `Ext.getCmp` 的依賴。