关于树面板TreePanel的简单应用

这里介绍个简单的树面板应用。包括展开，收缩。点击时候触发事件，当某个节点展开触发的事件。当某个节点收缩触发的事件。

下面是自己总结的知识点吧。

1. 当某节点展开/收缩的时候，通过node直接可以引用该节点。node.Text引用该节点的文字。
2. 状态栏上设置文字可以通过调用setStatus()函数进行设置。

代码如下：

<ext:TreePanel ID="TreePanel" runat="server" Width="300" Height="450" Icon="BookOpen" Title="目录" AutoScroll="true"> <TopBar> <ext:Toolbar ID="ToolBar" runat="server"> <Items> <ext:Button ID="btnExpand" runat="server" Text="展开"> <Listeners> <Click Handler="#{TreePanel}.expandAll();" /> </Listeners> </ext:Button> <ext:Button ID="btnCollapse" runat="server" Text="收缩"> <Listeners> <Click Handler="#{TreePanel}.collapseAll();" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar> <Root> <ext:TreeNode Text="顶节点" Expanded="true"> <Nodes> <ext:TreeNode Text="一级节点一" Icon="UserGray"> <Nodes> <ext:TreeNode Text="二级节点一" Icon="Music" /> <ext:TreeNode Text="二级节点二" Icon="Music" /> <ext:TreeNode Text="二级节点三" Icon="Music" /> <ext:TreeNode Text="二级节点四" Icon="Music" /> <ext:TreeNode Text="二级节点五" Icon="Music" /> </Nodes> </ext:TreeNode> <ext:TreeNode Text="一级节点二" Icon="UserGray"> <Nodes> <ext:TreeNode Text="二级节点六" Icon="Music" /> <ext:TreeNode Text="二级节点七" Icon="Music" /> <ext:TreeNode Text="二级节点八" Icon="Music" /> <ext:TreeNode Text="二级节点九" Icon="Music" /> <ext:TreeNode Text="二级节点十" Icon="Music" /> </Nodes> </ext:TreeNode> </Nodes> </ext:TreeNode> </Root> <BottomBar> <%--AutoClear属性表示状态栏上的文字多长时间消失--%> <ext:StatusBar ID="StatusBar" runat="server" AutoClear="1500" /> </BottomBar> <Listeners> <%--setStatus()作用：在状态栏上显示信息，clear表示状态栏文字是否消失--%> <%--当树控件点击时候触发的事件--%> <Click Handler="#{StatusBar}.setStatus({text: '选择的节点: <b>' + node.text + '</b>',clear:false});" /> <%--当树控件展开时触发的事件--%> <ExpandNode Handler="#{StatusBar}.setStatus({text:'展开的节点:<b>' + node.text + '</b>',clear:true});" /> <%--当树控件收缩时出发的事件--%> <CollapseNode Handler="#{StatusBar}.setStatus({text:'收缩的节点:<b>' + node.text + '</b>',clear:true});" /> </Listeners> </ext:TreePanel>