ExtJS Treepanel Refresh the Tree menu

In the previous project development learning process, I need to implement a function, is to click on the navigation bar link after the left tree menu automatically generated corresponding menu items. The problem bothered me for a long time.

Later, after reading the official documents of ExtJS and the demo after a moment of epiphany.

Let's take a serious look at this. To achieve this is to let the tree menu refresh.

Let's start by looking at what the official demo says:

Key code in the background Default.aspx.cs file:

[Directmethod] public string Refreshmenu () {Ext.Net.TreeNodeCollection nodes = this.        Buildtree (NULL); return nodes.    ToJson (); }

Key JavaScript code in the foreground default.aspx file:

<script type= "Text/javascript" >        var refreshtree  = function  (tree)  {                          Ext.net.DirectMethods.RefreshMenu ({                 success : function  (Result)  {                     var nodes =  eval (Result);                     if (nodes.length > 0) {                          Tree.initchildren (nodes);                     }                     else{                          tree.getrootnode (). Removechildren ();                     }                 }             });         }    </ Script>

As you can see from the lines above, you can use the Tree.initchildren () method to refresh the entire tree.

Therefore, we come to the gourd to draw the gourd.

First, the key code for the background Main.aspx.cs file is as follows (the code to build the tree menu is omitted here):

[Directmethod] public string Refreshmenu (string sid) {Ext.Net.TreeNodeCollection nodes = this.    Buildtree (SID); return nodes. ToJson (); }

Second, the JavaScript code in the foreground main.aspx file is as follows:

$ (document). Ready (function  ()  {                 //Click on event         $ for Level two menu item ("Ul#topnav li  ul a "). Click (function  ()  {             VAR TREE = EXT.GETCMP ("TreePanel1");  //get tree Menu Components              var sid = $ (This) [0].id;             refreshtree (TREE, SID);  //Refresh Tree Menu              //Eliminate default behavior              return false;        });  });     //Refresh Tree Menu     var refreshTree = function  (tree,  SID)  {  &nbsP;     ext.net.directmethods.refreshmenu (sid, {             success: function  (Result)  {                 var nodes = eval (Result );                 //alert ( result);                 if   (nodes.length > 0)  {                     tree.initchildren (nodes);                     //ext.msg.alert (' Hint ' ,  ' success ');                 }                 else {                      Tree.getrootnode (). Removechildren ();                     //ext.msg.alert (' warning ',  ' failure ');                 }             }        });     }

HTML code for the front main.aspx page

<ul id= "Topnav"  style= "float:right; margin-right:90px;" >    <li  style= "Width:100px; text-align:center" > Common functions </li>     <li id= "menu1"  onmouseover= "  style=" width:100px;  Text-align:center ">      <a href=" # > work orders, Performance </a>          <ul id= "submenu1"  class= "Left_side" >          <li>             <asp:repeater runat= "Server"  id= "RP_GDJX"  datasourceid= "SqlDataSource1" >                < itemtemplate>                      <a id= "<% #Eval (" Gndm ")  %>"  href= ' ><% #Eval ("GNMC")%></a>                 </ItemTemplate>                 </asp:Repeater>                 <asp:sqldatasource id= "SqlDataSource1"  runat= "Server"  connectionstring= "<%$                      connectionstrings:yxglxtconnectionstring  %> "                      selectcommand= "Select * from tblxtgn where gndm in (01,02,03) ">                 </asp:sqldatasource>          </li>           </ul>     </li> </ul>

The result of the final implementation

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/82/51/wKiom1dQ9lWBtxayAAA1vDwIbGY919.png "style=" float: none; "title=" Pic1.png "alt=" Wkiom1dq9lwbtxayaaa1vdwibgy919.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/82/50/wKioL1dQ91fhMuQWAABA5PY2rwo428.png "style=" float: none; "title=" Pic2.png "alt=" Wkiol1dq91fhmuqwaaba5py2rwo428.png "/>

This article is from the "Jccto" blog, make sure to keep this source http://jccto.blog.51cto.com/11387227/1785744

ExtJS Treepanel Refresh the Tree menu