ExtJS 4 TreeGrid 實戰心得與常見坑點避雷指南

近期調試 ExtJS 4 TreeGrid 範例，發現網路資源多不可靠、官方文檔缺乏搜索功能，開發體驗極差。本文記錄成功跑通 TreeGrid 的關鍵步驟與修正要點。

必要引入檔案

<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="treegrid.js"></script>

頁面容器

<div id="tree-example"></div>

關鍵修正：treegrid.js 中的 renderTo

官方範例的 treegrid.js 中 renderTo 設為 Ext.getBody()，導致無法正確掛載到指定 div。必須修改為目標容器 ID：

renderTo: 'tree-example', // 官方寫成 getBody() 是大坑

完整可用的 treegrid.js 代碼

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);
Ext.onReady(function() {
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task', type: 'string'},
            {name: 'user', type: 'string'},
            {name: 'duration', type: 'string'}
        ]
    });
    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        proxy: {
            type: 'ajax',
            url: 'treegrid.json'
        },
        folderSort: true
    });
    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: 'tree-example', // 必須指定正確容器 ID
        collapsible: true,
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        columns: [{
            xtype: 'treecolumn',
            text: 'Task',
            flex: 2,
            sortable: true,
            dataIndex: 'task'
        },{
            xtype: 'templatecolumn',
            text: 'Duration',
            flex: 1,
            sortable: true,
            dataIndex: 'duration',
            align: 'center',
            tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                formatHours: function(v) {
                    if (v < 1) { return Math.round(v * 60) + ' mins'; }
                    else if (Math.floor(v) !== v) {
                        var min = v - Math.floor(v);
                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                    } else { return v + ' hour' + (v === 1 ? '' : 's'); }
                }
            })
        },{
            text: 'Assigned To',
            flex: 1,
            dataIndex: 'user',
            sortable: true
        }]
    });
});

注意事項

• 確保 treegrid.json、CSS 等資源檔案已複製到正確目錄。
• ExtJS 4 官方範例常有過時或錯誤配置，實際部署時務必驗證 renderTo、proxy.url 等關鍵屬性。
• 若遇到無法顯示、資料不載入，優先檢查瀏覽器開發者工具的 Network 與 Console 面板。

掌握這些細節，能讓你快速在專案中落地 ExtJS 4 TreeGrid，避免踩坑浪費時間。