关于树面板TreePanel的简单应用

最新推荐文章于 2021-09-01 16:02:46 发布

原创最新推荐文章于 2021-09-01 16:02:46 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #button #server

coolite 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用ExtJS实现的树面板应用案例，详细展示了如何通过点击、展开和收缩节点来触发不同的事件，并更新状态栏信息。文章提供了完整的代码示例，包括如何设置按钮以实现节点的全部展开和收缩。

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

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

当某节点展开/收缩的时候，通过node直接可以引用该节点。node.Text引用该节点的文字。
状态栏上设置文字可以通过调用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: '选择的节点: ' + node.text + '',clear:false});" /> <%--当树控件展开时触发的事件--%> <ExpandNode Handler="#{StatusBar}.setStatus({text:'展开的节点:' + node.text + '',clear:true});" /> <%--当树控件收缩时出发的事件--%> <CollapseNode Handler="#{StatusBar}.setStatus({text:'收缩的节点:' + node.text + '',clear:true});" /> </Listeners> </ext:TreePanel>