1.CodeAs follows:
1 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <HTML xmlns = "http://www.w3.org/1999/xhtml"> 3 <Head> 4 <Title> </title> 5 <! -- Extjs framework --> 6 <SCRIPT type = "text/JavaScript" src = "/EXT/adapter/EXT/ext-base.js"> </SCRIPT> 7 <SCRIPT type = "text/JavaScript" src = "/ext/ ext-all.js"> </SCRIPT>8 <LINK rel = "stylesheet" type = "text/CSS" href = "/EXT/resources/CSS/ext-all.css"/> 9 <Style type = "text/CSS"> 10 . Nodeicon 11 { 12 Background-image: URL (image/user.gif )! Important; 13 } 14 </Style> 15 <! -- Extjs framework ended --> 16 <SCRIPT type = "text/JavaScript"> 17 Ext. onready ( Function (){ 18 // Node data source of the tree 19 VaR Node = { 20 Text: 'root' , 21 Expanded: True , 22 Leaf: False , 23 Children :[ 24 {Text: 'root Node 1 [user icon] ', leaf: True , Iconcls: 'nodeicons' }, 25 {Text: 'root node 2', leaf: True }, 26 {Text: 'root node 3', leaf: False , Children :[ 27 {Text: 'node 3 sub-node 1', leaf: True }, 28 {Text: 'node 3 sub-node 2', leaf: False , Expanded: True , Children :[ 29 {Text: 'node 3 subnode 2 node 1 ', leaf: True }, 30 {Text: 'node 3 sub-node 2 node 2 ', leaf:True } 31 ] 32 } 33 ] 34 } 35 ] 36 }; 37 // Tree Panel (local data source) 38 VaR Treelocal = New Ext. Tree. treepanel ({ 39 Title: 'treepancellocal' , 40 // Rootvisible: false, 41 Root: Node 42 }); 43 // Tree Panel (server data source) 44 VaR Treeservice = New Ext. Tree. treepanel ({ 45 Title: 'treepanelservice' , 46 Root: {text: 'root', expanded: True }, 47 // Rootvisible: false, 48 Loader: New Ext. Tree. treeloader ({ 49 URL: '/app_ashx/demo/tree. ashx' 50 }) 51 }); 52 // Single Table 53 VaR Form = New Ext. Form. formpanel ({ 54 Frame: True , 55 Title: 'form title' , 56 Style: 'margin: 10px' , 57 Items: [treelocal, treeservice], 58 Buttons :[{ 59 Text: 'retrieve selected item' , 60 Handler:Function (){ 61 Selectnode = Treelocal. getselectionmodel (). getselectednode (); 62 Alert ('treepanellocal: '+ (selectnode = Null ? Treelocal. Root. Text: selectnode. Text )); 63 } 64 }] 65 }); 66 // Form 67 VaR Win = New Ext. Window ({ 68 Title: 'windows' , 69 Width: 476 , 70 Height: 574 , 71 Resizable: True , 72 Modal: True , 73 Closable: True , 74 Maximizable: True , 75 Minimizable: True , 76 Items: Form 77 }); 78 Win. Show (); 79 }); 80 </SCRIPT> 81 </Head> 82 <Body> 83 <! -- 84 Note: 85 (1) VaR Tree =New Ext. Tree. treepanel (): Creates a new treepanel form object. 86 (2 ) Root: node: root node. 87 (3) expanded: True : Whether to expand the subnode. The default value is false, for example, "Root Node 3 ". 88 (4) leaf: True : Whether it is a leaf node. Note that if it is set to false but not to children, a display of reading subnodes will be generated all the time. 89 (5) // Rootvisible: false: Sometimes we do not want to display the root node. You can set its visibility through rootvisible. In this example, the root is not hidden. 90 (6) Loader: New Ext. Tree. treeloader ({ 91 URL: '/app_ashx/demo/tree. ashx' 92 }) 93 The data loading component of the tree looks for the JSON returned by the service end through the URL and automatically converts it to treenode. 94 (7) iconcls: 'nodeicons' : The icons in extjs are displayed as "Folders" or "Lists". You can use iconcls to change the tree menu icon. 95 (8) selectnode = Treelocal. getselectionmodel (). getselectednode (): gets the selected item. 96 --> 97 </Body> 98 </Html>
The background code is as follows:/app_ashx/demo/tree. ashx:
1 Using System. Web; 2 3 Namespace Hzyt. extjs. Website. app_ashx.demo 4 { 5 Public Class Tree: ihttphandler 6 { 7 Public Void Processrequest (httpcontext context) 8 { 9 String Strresult = @" [ 10 {Text: 'root Node 1 [user icon] ', leaf: True, iconcls: 'nodeicons '}, 11 {Text: 'root node 2', leaf: true }, 12 {Text: 'root node 3', leaf: false, children :[ 13 {Text: 'node 3 sub-node 1', leaf: true }, 14 {Text: 'node 3 sub-node 2', leaf: false, expanded: True, children :[ 15 {Text: 'node, three subnodes, two node, one point', leaf: true }, 16 {Text: 'node 3 sub-node 2 node 2 ', leaf: true} 17 ] 18 } 19 ] 20 } 21 ] " ; 22 Context. response. Write (strresult ); 23 } 24 25 Public Bool Isreusable 26 { 27 Get 28 { 29 Return False ; 30 } 31 } 32 } 33 }
2. The effect is as follows:
User.gif icons
Reprinted please indicate the source: http://www.cnblogs.com/iamlilinfeng
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
