extjs 树(tree)形菜单制作-静态菜单 例子

<html>
<head>
<title>ExtJs</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
   var root=new Ext.tree.AsyncTreeNode({
    id:"root",
    text:"根节点",
    children:[
     {
      text:"个人管理",
      children:[
       {text:"修改资料",leaf:true},
       {text:"审核操作",leaf:true}
      ]
     },{
      text:"系统管理",
      children:[
       {text:"用户管理",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}
      ]
     }
    ]
   });
   var tree=new Ext.tree.TreePanel({
    root:root,//设置为根节点
    renderTo:"hello",
    width:200
   });
   tree.expandAll();            //展开所有节点
   //Ext.QuickTips.init();     //只显示根节点
});
</script>
<body>
<div id="hello"></div>
</body>
</html>

其中，AsyncTreeNode为异步加载的树节点（其中leaf:true属性指明该节点为叶子节点），root:root在TreePanel中设置为根节点，renderTo:"hello"为映射到id为hello的层中，tree.expandAll()为展开所有的节点。

如果使用Ext.QuickTips.init()替换tree.expandAll()，则只显示根节点。

效果图如下：


posted @ 2011-09-15 16:22  子萧  阅读(1312)  评论(0)    收藏  举报