ExtJS 5 TreePanel 復選框聯動選中狀態遞歸實現

問題

ExtJS 5+ 中 checkchange 事件參數 node 類型變更為 Ext.data.TreeModel，原 node.ui.toggleCheck() 失效（ui 屬性不存在）。

解決方案：操作 Model 數據源

tree.on('checkchange', function(node, checked) {
    if (checked) {
        checkParentNode(node.parentNode, checked);
    }
    checkChildNode(node, checked);
});

function checkChildNode(node, checked) {
    if (!node) return;
    node.set('checked', checked); // 更新數據源，UI 自動同步
    node.eachChild(function(child) {
        checkChildNode(child, checked);
    });
}

function checkParentNode(node, checked) {
    if (!node) return;
    // 僅當所有子節點同樣狀態時才設置父節點，避免「半選」邏輯衝突
    var allSame = true;
    node.eachChild(function(child) {
        if (child.get('checked') !== checked) allSame = false;
    });
    if (allSame) {
        node.set('checked', checked);
        checkParentNode(node.parentNode, checked);
    }
}

關鍵點

• ExtJS 5+ 不再使用 node.ui，直接 node.set('checked', value) 修改 Model，視圖通過綁定自動更新。
• eachChild 遞歸遍歷子節點，parentNode 獲取父節點。
• 父節點邏輯建議加「全同步」判斷，避免部分選中時父節點錯誤全選/取消。

完整示例（含半選狀態）

若需「不確定/半選」狀態（indeterminate），可擴展 Model 增加字段，並在 checkParentNode 中根據子節點三狀態（全真/全假/混合）設置父節點 checked 為 true/false/null，配合 CSS 顯示方塊中劃線。