点选TreePanel当前节点,折叠其他节点
项目中TreePanel节点过多,经过多次点击后,所有节点都被展开,用户不太容易看清树节点。
解决思路:点击当前节点,折叠其他节点。
图一:点击A文件夹,展开A文件夹下所有节点,折叠除A文件夹之外的所有节点。
图二:点击B文件夹,展开B文件夹下所有节点,折叠除B文件夹之外的所有节点。
TreePanel部分代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <ext:TreePanel ID="MenuTree" runat="server" Header="false" AutoScroll="true" CollapseFirst="false" UseArrows="true" Animate="false"> 2 <TopBar> 3 <ext:Toolbar runat="server"> 4 <Items> 5 <ext:Button ID="Button1" runat="server" Text="展开所有" Icon="ArrowOutLonger" > 6 <Listeners> 7 <Click Handler="#{MenuTree}.expandAll();" /> 8 </Listeners> 9 </ext:Button> 10 <ext:Button ID="Button2" runat="server" Text="折叠所有" Icon="ArrowInLonger" > 11 <Listeners> 12 <Click Handler="#{MenuTree}.collapseAll();" /> 13 </Listeners> 14 </ext:Button> 15 </Items> 16 </ext:Toolbar> 17 </TopBar> 18 <Listeners> 19 <ItemClick Handler="f();" /> 20 </Listeners> 21 </ext:TreePanel>
Javascript部分代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var f = function () { 2 var nodes = Ext.getCmp("MenuTree").getSelectedNodes(); 3 Ext.getCmp("MenuTree").collapseAll(); 4 var node = Ext.getCmp("MenuTree").store.getNodeById(nodes[0].nodeID); 5 var path = nodes[0].path; 6 var strpaths = path.toString().split("/"); 7 for (var i = 1; i < strpaths.length; i++) { 8 var item = Ext.getCmp("MenuTree").store.getNodeById(strpaths[i]); 9 if(item!=null && item.data.leaf!=true) 10 item.expand(); 11 } 12 }