ExtJS TreeLoader 擴展適配 Struts2 JSON 插件：解析包含 root 數組的響應對象

Struts2 JSON 插件固定返回 {"root": [...], "totalProperty": N} 結構，而 Ext.tree.TreeLoader 預期直接接收數組。本文提供 Ext.tree.JsonPluginTreeLoader 擴展，重寫 processResponse 自動提取 root 屬性（可配置 rootName），零侵入後台即可實現樹形數據加載。

問題背景

• 後台 Struts2 配置：<param name="root">page</param> → 響應 {"root": [{...}, {...}], "totalProperty": 2}。
• ExtJS 原生 TreeLoader 無法識別包裹對象，導致樹節點渲染失敗。

擴展代碼

Ext.tree.JsonPluginTreeLoader = function(config) {
    this.rootName = 'root'; // 可覆蓋
    Ext.tree.JsonPluginTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(Ext.tree.JsonPluginTreeLoader, Ext.tree.TreeLoader, {
    processResponse: function(response, node, callback) {
        var json = response.responseText;
        try {
            var o = response.responseData || Ext.decode(json);
            // 關鍵：若為對象則提取 rootName 屬性
            if (Ext.type(o) == 'object') {
                o = o[this.rootName || 'root'];
            }
            node.beginUpdate();
            for (var i = 0, len = o.length; i < len; i++) {
                var n = this.createNode(o[i]);
                if (n) node.appendChild(n);
            }
            node.endUpdate();
            this.runCallback(callback, scope || node, [node]);
        } catch(e) {
            this.handleFailure(response);
        }
    }
});

使用方式

{
    xtype: 'treepanel',
    loader: new Ext.tree.JsonPluginTreeLoader({
        dataUrl: 'xxx.action',
        // rootName: 'nodes'  // 可選，適配不同後台字段名
    }),
    root: new Ext.tree.AsyncTreeNode({ text: '根節點' })
}

後台無需修改

保持原有 includeProperties: "root.*" 配置即可，擴展完全在前端吸收差異。