EXTJS实现静态树的代码示例

发布时间:2020-10-23编辑:脚本学堂
本文介绍下Extjs静态树的实现代码,有需要的朋友,可以参考下。

方法1,代码模式
 

复制代码 代码示例:
new Ext.tree.AsyncTreeNode({
   id:'root', 
   text:'根节点', 
   children:[ 
  {
   text:'个人管理', 
   children:[ 
    {text:'修改资料',leaf:true}, 
    {text:'审核操作',leaf:true} 
   ] 
  },{
   text:'系统管理', 
   children:[
    {text:'用户管理',url:'page/system/dataDictionary.jsp' ,leaf:true}, 
    {text:'角色管理',leaf:true}
    {text:'分类管理',leaf:true}
    {text:'卡片管理',leaf:true}
    {text:'汇总审核',leaf:true}
    {text:'公告管理',leaf:true
   
  },
   text:'综合信息'
   children:
    {text:'销售统计',leaf:true}
    {text:'浏览投诉',leaf:true
   
  }); 

方法2,对象模式
 

复制代码 代码示例:
var root1 = new Ext.tree.TreeNode({ 
   text:'管理系统', 
 //  checked:true, 
   url:'about.jsp' 
 }); 
 
 var node1 = new Ext.tree.TreeNode({ 
   text:'系统管理', 
    // icon: './../../images/2324.png', 
   url:'#'
 }); 
 
 var node2 = new Ext.tree.TreeNode({ 
   text:'档口管理', 
  // icon: './../../images/map.png', 
   url:'#' 
 }); 
 
 
 var node3 = new Ext.tree.TreeNode({ 
   text:'货物管理', 
  // icon: './../../images/chinaz2.png', 
   url:'#' 
 });
  
 var node4 = new Ext.tree.TreeNode({ 
   text:'短信管理', 
  // icon: './../../images/messag.png', 
   url:'showSystemUsersList.action' 
 });  
 
 var node5 = new Ext.tree.TreeNode({ 
   text:'报表', 
  // icon: './../../images/Chart.png', 
   url:'showSystemUsersList.action' 
 });  
 
 
 //-----二级菜单begin 
  //   var node101 = new Ext.tree.TreeNode({ 
  //  text:'系统用户', 
  //     // icon: './../../images/user.png', 
  //  url:'userlist.action'  
  //   }); 
 
 var node102 = new Ext.tree.TreeNode({ 
   text:'数据字典', 
  // icon: './../../images/setting.png', 
   url:'page/system/dataDictionary.jsp'  
 }); 
 var node103 = new Ext.tree.TreeNode({ 
   text:'员工录入管理', 
  // icon: './../../images/note.png', 
   url:'page/system/userEnterInfo.jsp' 
 }); 
 var node104 = new Ext.tree.TreeNode({ 
   text:'员工工作时间', 
  // icon: './../../images/chinaz6.png', 
   url:'page/system/userWorkTime.jsp' 
 });
 var node105 = new Ext.tree.TreeNode({ 
   text:'用户管理', 
  // icon: './../../images/chinaz5.png', 
   url:'page/system/userList.jsp' 
 });
 var node106 = new Ext.tree.TreeNode({ 
   text:'权限列表', 
  // icon: './../../images/chinaz1.png', 
   url:'page/system/roleList.jsp' 
 });
 
 var node107 = new Ext.tree.TreeNode({ 
   text:'基础档口', 
  // icon: './../../images/chinaz10.jpg', 
   url:'showShopList.action' 
 });  
 
 var node108 = new Ext.tree.TreeNode({ 
   text:'供应商', 
  // icon: './../../images/chinaz11.jpg', 
   url:'showShopUserList.action' 
 });
   
  var node109 = new Ext.tree.TreeNode({ 
   text:'档口用户', 
  // icon: './../../images/contacts.png', 
   url:'showShopInUserList.action' 
 }); 
 
  var node110 = new Ext.tree.TreeNode({ 
   text:'档口费用', 
  // icon: './../../images/Coin256.png', 
   url:'showSystemUsersList.action' 
 }); 
  var node111 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node112 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node113 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node114 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node115 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node116 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node117 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node118 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
  var node119 = new Ext.tree.TreeNode({ 
  text:'档口费用', 
  // icon: './../../images/Coin256.png', 
  url:'showSystemUsersList.action' 
     }); 
 //-----二级菜单end
  
 root.appendChild(node1); 
 root.appendChild(node2); 
 root.appendChild(node3); 
 root.appendChild(node4); 
 root.appendChild(node5);
 
 
 //-----二级菜单begin 
  //  node1.appendChild(node101); 
 node1.appendChild(node102); 
 node1.appendChild(node103); 
 node1.appendChild(node104); 
 node1.appendChild(node105); 
 node1.appendChild(node106); 
 
 node2.appendChild(node107); 
 node2.appendChild(node108); 
 node2.appendChild(node109); 
 node2.appendChild(node110);
 
 //-----二级菜单end
 var menu = new Ext.tree.TreePanel({ 
  
   rootVisible:false,   //隐藏根节点
   border:true,    //边框
   animate:true,   //动画效果
   autoScroll:true,  //自动滚动
   enableDD:false,   //拖拽节点  
   containerScroll:true,
   autoScroll:true, 
   height:750,    
   root:root, 
 
   listeners: { 
   click:function(node,e){ 
  //父级菜单点击就返回 
  if(node.attributes.url=="#"){ 
  return; 
  } 
  gotoTabPage(node.attributes.url,node.text); 
   
    
   },//end click func 
   load:function(node,e){ 
 
   }//end load func 
   }//end listeners 
   }); 
 menu.setRootNode(root);