ExtJS 5 TreePanel 顯示 Checkbox 的正確屬性配置

直接答案

在 TreeStore 的節點數據模型中，為節點添加 checked 字段：

• checked: true → **勾選框呈現選中狀態**。
• checked: false → **顯示勾選框但未選中**。
• 無 checked 字段 → **不顯示勾選框**（僅文字）。

完整示例

Ext.define('MyApp.model.MenuNode', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'text', type: 'string'},
        {name: 'checked', type: 'boolean', defaultValue: false}, // 關鍵字段
        {name: 'leaf', type: 'boolean'},
        {name: 'expanded', type: 'boolean'}
    ]
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'MyApp.model.MenuNode',
    root: {
        expanded: true,
        children: [
            { text: '節點 1', checked: true, leaf: true },   // 顯示 ☑
            { text: '節點 2', checked: false, leaf: true },  // 顯示 ☐
            { text: '節點 3', leaf: true }                    // 無 checkbox
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: '帶勾選的樹',
    width: 300,
    height: 400,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

進階：父子節點聯動（Cascade）

ExtJS 5 默認**不自動級聯**父子勾選狀態。需監聽 checkchange 事件手動實現：

listeners: {
    checkchange: function(node, checked) {
        // 1. 級聯子節點
        node.cascadeBy(function(child) {
            child.set('checked', checked);
        });

        // 2. 級聯父節點（所有子節點勾選時父節點才勾選）
        node.bubble(function(parent) {
            var allChecked = parent.childNodes.every(function(c) { return c.get('checked'); });
            parent.set('checked', allChecked);
        });
    }
}

UI 樣式微調

• 隱藏非葉子節點的 checkbox：CSS .x-tree-node .x-tree-checkbox { display: none; } 配合 node.isLeaf() 判斷。
• 自定義圖標：覆蓋 x-tree-checkbox 背景圖片。

總結

1. 數據模型字段 checked: boolean 是顯示 checkbox 的**開關**。
2. true/false 決定初始勾選狀態。
3. 聯動邏輯需自行在 checkchange 中實現。

掌握這一點，TreePanel 的多選、權限樹、配置下發等場景即可輕鬆實現。