Ext js tree Application

 

When you are working on a project, you can use the ext Tree Knowledge. Paste the code for future reference.

JS Code

VaR treeloader = [
{ID: '2', text: 'zhengzhou ', leaf: true },
{ID: '3', text: 'xinxiang ', leaf: true },
{ID: '4', text: 'nanyang ', leaf: true },
{ID: '5', text: 'anyang ', leaf: true },
{ID: '6', text: 'xinyang ', leaf: true },
{ID: '7', text: 'shangqiu ', leaf: true}
];
VaR root = new Ext. Tree. asynctreenode ({
ID: '1 ',
Text: "Province ",
Children: treeloader
});
VaR tree = new Ext. Tree. treepanel ({
Renderto: 'tree', // ID html
Width: 350,
Height: 250,
Border: false,
Animate: True,
Lines: True,
Root: Root
});
Root. Expand (); // automatically show the tree
 
VaR treepanel = new Ext. Panel ({
Usearrows: True,
Autoscroll: True,
Animate: True,
Containerscroll: True,
 
Width: 400,
Height: 350,
Border: false,
Items :[{
Contentel: "treebox ",
Border: false
}]

});
 
 
VaR treewin = new Ext. Window ({
Frame: True,
Width: 400,
Height: 350,
Title: "city selection ",
Shadow: True,
Modal: True,
Closeaction: "hide ",
Items: [treepanel]

});

$ ('# City1, # city2'). Click (function (E, T ){
Treewin. Show ();
Tree. On ("click", function (node ){
City = node. text;
});
});

$ ('# Treecommit'). Click (function (){
Treewin. Hide ();
// Tree. collapseall ();
Ext. Fly ("city1"). Update (city );
Ext. Fly ("city2"). Update (city );
});

JSP code:

<Div id = "treebox" class = "X-hide-display">
<Div id = "Tree" style = "float: Left; margin-left: 25px;"> </div>
<Div>
<Button id = "treecommit" type = "Submit" style = "float: Left; margin-left: 50px;">

OK </button>
</Div>
<Div style = "clear: both"> </div>