ext 树形菜单

最新推荐文章于 2018-06-19 10:12:56 发布

风中叶

最新推荐文章于 2018-06-19 10:12:56 发布

阅读量3.9k

点赞数

分类专栏：资料汇总文章标签： ext stylesheet function tree 公告

资料汇总专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先看一个静态菜单的例子，代码如下：

<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()，则只显示根节点。

效果图如下：

风中叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext 树形菜单

<br />先看一个静态菜单的例子，代码如下：<br /><html><br /><head><br /><title>ExtJs</title><br /><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/><br /><script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><br /><script type="
复制链接

扫一扫