Extjs4 Study Notes (20)-treepanel instance

With the release of the fifth preview version of extjs4, more instances are released. This article introduces the use of extjs4 treepanel. This instance is from the extjs official website. This instance does not limit the drag and drop of Tree nodes. In this example, treestore and ajaxproxy are used.

HTML code:

 

1. <Div id = "tree-Div" style = "width: 250px; Border: 1px solid # c3daf9;"> </div>

JS Code:

 

1. Ext. Require ([
2. 'Ext. Tree .*',
3. 'Ext. Data .*'
4. ]);
6. Ext. onready (function (){
7. VaR store = new Ext. Data. treestore ({
   
8. Proxy :{
9. Type: 'ajax ',
   
10. URL: 'Get-nodes. php'
11. },
12. Root :{
13. Text: 'ext js ',
    
14. ID: 'src ',
15. Expanded: True
16. },
17. Sorters :[{
18. Property: 'leaf ',
19. Direction: 'asc'
20. },{
21. Property: 'filename ',
    
22. Direction: 'asc'
23. }]
24. });
26. VaR tree = new Ext. Tree. treepanel ({
    
27. // Autoscroll: True,
    
28. // Enabledd: True,
29. // Containerscroll: True,
    
30. Animate: True,
31. Border: false,
    
32. Store: store,
33. Viewconfig: {plugins: [{ptype: 'treeviewdd'}]},
    
34. Renderto: 'tree-Div ',
35. Height: 300
36. });
37. });

In this example, the returned data is in JSON format and the server must return data similar to the following:

 

1. [{"Text": "layout", "ID": "src \/layout", "CLS": "folder" },{ "text": "componentquery. JS "," ID ":" src \/componentquery. JS "," leaf ": True," CLS ":" file "},{" text ":" Draw "," ID ":" src \/draw ", "CLS": "folder"}]