// 定義搜索節點樹結構Store
const nodeStore = Ext.create('Ext.data.TreeStore',
{
autoLoad : true,
id : 'nodeStoreTreeId',
fields : ['index', 'nodeId', 'name_or_index', 'to_node', 'type'],
proxy : {
type : 'memory',
reader : {
type : 'json',
}
},
root : {
text : '根節點',
expanded : true
},
folderSort : true,
});
// 搜索子節點展示樹結構面板
const nodeTreePanel = Ext.create('Ext.tree.TreePanel',{
title : '子節點樹結構圖',
id : `${data.title}NodeTreeId`,
width : '45%',
height : 400,
region : 'east',
collapsed : false,
collapsible : false,
closeAction : 'hide',
useArrows : true,
rootVisible : false,
autoScroll : true,
autoShow : true,
animate : true,
store : nodeStore,
listeners : { // 主要就是這個監聽事件
// 展開之后觸發 afteritemexpand
'afteritemexpand' : function(itme, index)
{
// 准備的參數或者其他數據，我這邊需要一個nodeId
const nodeId = itme.data.nodeId;
// 通過這個nodeId獲得當前節點下的子節點數據。
const Result = heapNodeSerialize(jsHeapSnapShot[data.title], nodeId);
// 處理添加新的子節點
for (let i = 0; i < itme.parentNode.childNodes.length; i++)
{
const everyChildNode = itme.parentNode.childNodes[i];
const everyChildNodeId = everyChildNode.data.nodeId;
if (everyChildNodeId == nodeId)
{
// 首次展開需要添加子節點。
for (let j = 0; j < everyChildNode.parentNode.childNodes.length; j++)
{
const everyGrandsonNode = everyChildNode.parentNode.childNodes[j];
// 已經加載過子節點的值，后面再次展開無需再加載。
if ((everyGrandsonNode.data.nodeId == nodeId) && everyGrandsonNode.childNodes.length == 0)
{
// 將葉子節點數據設置到子節點里面。
// 前面都是數據處理，這個才是向子節點添加子節點的地方。
everyChildNode.appendChild(Result);
}
}
}
}
}
}
});
// 效果圖
圖·1
// 期間遇到的問題
1、之前將使用的是itemclick事件，后來換成了 afteritemexpand 點擊展開后觸發事件，監聽itemclick事件
存在使用不怎么友好的問題。
2、當遇到子節點被重復展開觸發事件，會出現前面其他子節點同樣的子節點和現在的子節點一樣的節點
數據會出現亂竄問題。（這里可能有點繞-看下圖·2）：決解方案：在已經展開的節點上面做記錄，如果
重復展開並且后面的數據是一樣的，可直接return。這樣避免了數據亂竄的問題。
圖·2