最近在搞extjs4 TreeStore時有一個需求 就是要處理一下后台傳過來的json數據然后再顯示，看api也沒有找到解決辦法 ，最后看源碼在Ext.data.proxy.Server 看到這么一個方法

1. extractResponseData: function(response) {
2. return response;
3. },

然后我再 proxy 中重寫了這個方法

1. Ext.define("App.store.MenuStore",{
2. extend:'Ext.data.TreeStore',
3. model:'App.model.MenuModel',
4. proxy:{
5. type:'ajax',
6. url:app.contextPath + '/base/syresource!doNotNeedSecurity_getMainMenu.action',
7. reader:"json",
8. extractResponseData: function(response) {
9. var json = Ext.loadFilter(Ext.JSON.decode(response.responseText),{parentField : 'pid'});
10. Ext.each(json,function(record){
11. if(Ext.isEmpty(record.children)){
12. record.expanded = false;
13. record.leaf = true;
14. }else{
15. record.expanded = true;
16. }
17. });
18. response.responseText = Ext.JSON.encode(json);
19. return response
20. }
21. },
22. autoLoad: true
23. });

大家都喜歡ztree的簡單數據結構（扁平pid結構數據集），而Extjs並沒有給我們提供，於是只有我們自己動手了。

標准的 JSON 數據需要嵌套表示節點的父子包含關系

例如：

1. var nodes = [
2. {name: "父節點1", children: [
3. {name: "子節點1"},
4. {name: "子節點2"}
5. ]}
6. ];

簡單模式的 JSON 數據僅需要使用 id / pId 表示節點的父子包含關系

例如：

1. var nodes = [
2. {id:1, pId:0, name: "父節點1"},
3. {id:11, pId:1, name: "子節點1"},
4. {id:12, pId:1, name: "子節點2"}
5. ];

這是我希望轉換的json數據

1. [
2. {
3. "iconCls": "ext-icon-application_view_tile",
4. "id": "xtgl",
5. "target": "",
6. "text": "系統管理",
7. "url": "/welcome.jsp"
8. },
9. {
10. "iconCls": "ext-icon-newspaper_link",
11. "id": "zygl",
12. "pid": "xtgl",
13. "target": "cmp",
14. "text": "資源管理",
15. "url": "App.view.ResourceView"
16. },
17. {
18. "iconCls": "ext-icon-tux",
19. "id": "jsgl",
20. "pid": "xtgl",
21. "target": "cmp",
22. "text": "角色管理",
23. "url": "App.view.RoleView"
24. },
25. {
26. "iconCls": "ext-icon-group_link",
27. "id": "jggl",
28. "pid": "xtgl",
29. "target": "cmp",
30. "text": "機構管理",
31. "url": "App.view.OrganizationView"
32. },
33. {
34. "iconCls": "ext-icon-user_suit",
35. "id": "yhgl",
36. "pid": "xtgl",
37. "target": "cmp",
38. "text": "用戶管理",
39. "url": "App.view.UserView"
40. },
41. ]

1. Ext.loadFilter= function(data, opt) {
2. var idField, textField, parentField;
3. if (opt.parentField) {
4. idField = opt.idField || 'id';
5. textField = opt.textField || 'text';
6. parentField = opt.parentField || 'pid';
7. var i, l, treeData = [], tmpMap = [];
8. for (i = 0, l = data.length; i < l; i++) {
9. tmpMap[data[i][idField]] = data[i];
10. }
11. for (i = 0, l = data.length; i < l; i++) {
12. if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
13. if (!tmpMap[data[i][parentField]]['children'])
14. tmpMap[data[i][parentField]]['children'] = [];
15. data[i]['text'] = data[i][textField];
16. data[i]['leaf'] = true;//判斷為葉子節點
17. tmpMap[data[i][parentField]]['children'].push(data[i]);
18. } else {
19. data[i]['text'] = data[i][textField];
20. treeData.push(data[i]);
21. }
22. }
23. return treeData;
24. }
25. return data;
26. }