Tree example in ext

VaR tree; </P> <p> Ext. onready (function () {</P> <p> // create a panel <br/> var P = new Ext. panel ({<br/> title: 'tab 1', <br/> HTML: 'Show content in the left-side Tree '<br/> }); </P> <p> // create a tab <br/> var centerpanel = new Ext. tabpanel ({<br/> region: 'center', <br/> activeitem: 0, <br/> title: 'centerpanel ', <br/> items: [P], <br/> width: 800, <br/> Height: 400 <br/> }); </P> <p> // create a dynamic root node <br/> var root = new Ext. tree. asynctreenode ({<br/> ID: '0', <br/> text: 'Rootnode' <br/>}); </P> <p> // the data of the root node is read by default. <br/> var loader = new Ext. tree. treeloader ({<br/> dataurl: 'Load. action? Id = 0' <br/>}); </P> <p> // create a treepanel <br/> tree = new Ext. tree. treepanel ({<br/> title: '<span style = "vertical-align: Top" mce_style = "vertical-align: top "> <font class =" style4 "> resource management </font> </span> ', <br/> Animate: True, <br/> Loader: loader, <br/> root: Root, <br/> width: 120, <br/> en Abledd: True, <br/> collapsed: True <br/>}); </P> <p> // dynamically reads node content <br/> tree. on ('beforeload', beforeload); </P> <p> function beforeload (node) {<br/> tree. getloader (). dataurl = 'Load. action? Id = '+ node. ID; <br/> var Panel1 = centerpanel. items. itemat (0); <br/> centerpanel. remove (Panel1); </P> <p> var P = new Ext. panel ({<br/> title: node. text, <br/> HTML: '<p>' + node. text + '</P>' <br/>}); </P> <p> centerpanel. add (p); <br/> centerpanel. setactivetab (p); <br/>}</P> <p> tree. on ('click', click); </P> <p> function click (node, e) {<br/> var Panel1 = centerpanel. items. itemat (0); <br/> centerpanel. remove (Panel1); </P> <p> VaR P = new Ext. panel ({<br/> title: node. text, <br/> HTML: '<p>' + node. text + '</P>' <br/>}); </P> <p> centerpanel. add (p); <br/> centerpanel. setactivetab (p); <br/>}</P> <p> tree. setrootnode (Root); <br/> // tree. render (); <br/> // tree. expand (True, true); </P> <p> // create a dynamic root node <br/> var root1 = new Ext. tree. asynctreenode ({<br/> ID: '0', <br/> text: 'root node' <br/> }); </P> <p> // reads the data of the root node by default. <br/> var loader1 = new Ext. tree. treeloader ({<Br/> dataurl: 'Load. Action? Id = 0' <br/>}); </P> <p> var tree1 = new Ext. tree. treepanel ({<br/> title: '<span style = "vertical-align: Top" mce_style = "vertical-align: top "> <font class =" style4 "> Human Resources </font> </span> ', <br/> Animate: True, <br/> Loader: loader1, <br/> root: root1, <br/> width: 120, <br/> enabledd: True, <Br/> collapsed: True <br/>}); </P> <p> // dynamically reads the node content <br/> tree1.on ('beforeload ', beforeload1); </P> <p> function beforeload1 (node) {<br/> tree1.getloader (). dataurl = 'Load. action? Id = '+ node. ID; <br/> var Panel1 = centerpanel. items. itemat (0); <br/> centerpanel. remove (Panel1); </P> <p> var P = new Ext. panel ({<br/> title: node. text, <br/> HTML: '<p>' + node. text + '</P>' <br/>}); </P> <p> centerpanel. add (p); <br/> centerpanel. setactivetab (p); <br/>}</P> <p> tree1.on ('click', click1); </P> <p> function click1 (node, E) {<br/> var Panel1 = centerpanel. items. itemat (0); <br/> centerpanel. remove (Panel1); </P> <p> var P = new Ext. panel ({<br/> title: node. text, <br/> HTML: '<p>' + node. text + '</P>' <br/>}); </P> <p> centerpanel. add (p); <br/> centerpanel. setactivetab (p); <br/>}</P> <p> tree1.setrootnode (root1); </P> <p> var PS = new Ext. panel ({<br/> layout: 'accordion', <br/> items: [tree, tree1] <br/> }); </P> <p> var layout = new Ext. layout. accordion ({<br/> titlecollapse: false, <br/> Animate: True, <br/> activeontop: false <br/> }); </P> <p> var westpanel = new Ext. panel ({<br/> layout: 'accordion', <br/> title: '<font class = "style4"> <center> business module </center> </font>', <br/> region: 'west', <br/> width: 200, <br/> layoutconfig: layout, <br/> items: [tree, tree1] <br/> // collapsed: True <br/> }); </P> <p> var MEMU = new Ext. menu. menu ({<br/> allowothermenus: True, <br/> items: [{<br/> text: 'add', <br/> handler: addtreenode <br/>},{ <br/> text: 'delete', <br/> handler: deletetreenode <br/>},{ <br/> text: 'modify', <br/> handler: updatetreenode <br/>}] <br/> }); </P> <p> // Add nodes dynamically <br/> tree. on ('textmenu ', contextmenu); </P> <p> function contextmenu (node, e) {<br/> E. preventdefault (); <br/> MEMU. showat (E. getxy (); <br/>}</P> <p> // create a viewport <br/> var border = new Ext. viewport ({<br/> title: 'border layout ', <br/> layout: 'border', <br/> width: ext. get ('display '). getwidth (), <br/> Height: 560, <br/> items: [westpanel, centerpanel] <br/>}); <br/> border. show (); <br/>}); </P> <p> // Add a node <br/> function addtreenode () {<br/> var treenode = tree. getselectionmodel (). getselectednode (); <br/> If (treenode = NULL) {<br/> Ext. messageBox. alert ('hprompt ', 'select A node' first); <br/> return; <br/>}</P> <p> var id = treenode. ID; </P> <p> var fp = new Ext. form. formpanel ({</P> <p >}); <br/>}</P> <p> function deletetreenode () {<br/> Ext. messageBox. alert ('delete'); <br/>}</P> <p> function updatetreenode () {<br/> Ext. messageBox. alert ('modify'); <br/>}