日期:2014-05-16  浏览次数:20329 次

extjs的导航树的简单例子

Ext.onReady(function(){
?? Ext.QuickTips.init();
???? var tree=new?? Ext.tree.TreePanel({
??? //?? el:"tree"
?? });

??? var root=new Ext.tree.TreeNode({text:'项目信息'});
??? var node=new Ext.tree.TreeNode({
??????? text:"项目资料"

??? });
??? var node1=new Ext.tree.TreeNode({
??????? text:'标段信息'

??? });
??? var node2=new Ext.tree.TreeNode({
??????? text:"合同清单"

??? });
??? var node3=new Ext.tree.TreeNode({
??????? text:"形象清单"
?????
??? });
??? 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"); //中间主Panel
??????? var url="";
??????? if(text=="项目信息") url="a.jsp";
??????? if(text=="项目资料") url="b.jsp";
??????? if(text=="标段信息") url="c.jsp";
??????? if(text=="合同清单") url="d.jsp";
??????? if(text=="形象清单") url="e.jsp";
????
??????? mainPanel.load({
??????????? url:url,
??????????? nocache:true,
??????????? text:"正在加载中......",
??????????? 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:"第一栏",
?????????????? items:[tree],
?????????????? html:"第一栏"
?????????? },{
?????????????? title:"第二栏",
?????????????? html:"第二栏"
?????????? },{
?????????????? title:"第三栏",
?????????????? html:"第三栏"
?????????? }]
?????? },{
????????? region:"center",
?????????? split:true,
?????????? border:true,
?????????? id:"main"
?????? }

?????? ]

?? });
?
??
});