Simple Example of Extjs tree navigation

Ext. onReady (function (){
Ext. QuickTips. init ();
Var tree = new Ext. tree. TreePanel ({
// El: "tree"
});

Var root = new Ext. tree. TreeNode ({text: 'Project information '});
Var node = new Ext. tree. TreeNode ({
Text: "project materials"

});
Var node1 = new Ext. tree. TreeNode ({
Text: 'segment information'

});
Var node2 = new Ext. tree. TreeNode ({
Text: "contract list"

});
Var node3 = new Ext. tree. TreeNode ({
Text: "image list"

});
Root. appendChild (node );
Root. appendChild (node1 );
Root. appendChild (node2 );
Root. appendChild (node3 );
Tree. setRootNode (root );

Tree. on ("click", function (node ){
Var text = node. text;
Var mainPanel = Ext. getCmp ("main"); // The Center primary Panel.
Var url = "";
If (text = "project information") url = "a. jsp ";
If (text = "project materials") url = "B. jsp ";
If (text = "") url = "c. jsp ";
If (text = "contract List") url = "d. jsp ";
If (text = "image List") url = "e. jsp ";

MainPanel. load ({
Url: url,
Nocache: true,
Text: "loading ......",
Timeout: 30,
Scripts: true
});

});
 
Var viewport = new Ext. Viewport ({
Layout: "border ",
Items :[{
Region: "west ",
Width: 200,
Layout: "accordion ",
LayoutConfig :{
TitleCollapse: true,
Animate: true,
ActiveOnTop: false
},
Items :[{
Title: "First column ",
Items: [tree],
Html: "First column"
},{
Title: "second column ",
Html: "second column"
},{
Title: "third column ",
Html: "third column"
}]
},{
Region: "center ",
Split: true,
Border: true,
Id: "main"
}

]

});


});