一、继承图

image

二、属性

• 根节点
• 是否显示根节点目录
• 布尔类型，是否可折叠
• 布尔类型，是否显示节点之间连接的横竖线
• Ext.tree.TreeLoader类型，用于异步加载树数据

三、方法

四、事件

五、成员root的配置

• 当异步加载当前目录数据，会传递node:'id的值'
• 目录文字
• 布尔类型，是否展开，只会展开子节点
• 布尔类型，是否是叶子节点
• 数组，子节点
• 鼠标移在上面，的文字提示
• 成超链接，及可以配置hrefTarget
• 是否选中，成前面有勾选的形状、、没发现实际用途

六、代码

Ext.onReady(function(){
    Ext.QuickTips.init();//初始化消息提示框
    var mytree=new Ext.tree.TreePanel({
           renderTo:"window",//应用到的html元素id
           title:"Extjs静态树",
           animate:true,//是否动画
           autoScroll:true,
           autoHeight:true,
           width:200,
           //treePanel属性
           collapsible:true,//是否可折叠的
           rootVisible:true,//是否显示根节点                             
           lines:true,//是否显示节点之间连接的横竖线
           loader:new Ext.tree.TreeLoader({
                   dataUrl:"http://localhost:8080/hello/tree",
                   baseParams:{name:"tree"}//可选，额外传参。本身会传node属性:当前el的id
           }),
           root:new Ext.tree.AsyncTreeNode({// nodeType: 'async',
               id:"root",
               text:"根节点",//节点名称            
               expanded:true,//展开           
               leaf:false,//是否为叶子节点,默认false         
               children:[
                       {text:'节点 a',leaf:true},
                       {text:'节点 b',expanded:true,//这里测试 ,qtip href expanded checked属性
                       children:[
                           {text:"节点b1",checked:true,leaf:true},
                           {text:"节点b2",checked:true,leaf:true},
                           {text:"节点b3",qtip:"这个是超链接",href:"http://www.baidu.com",leaf:true}]
                       },
                       {id:"child1",text:'节点c'},//测试，如果leaf:false且没有children，则会异步加载数据 √
                       {text:'节点d',
                           children:[
                           {id:"child2",text:"节点d1"}]//对比id:child1,的请求参数 √
                       }],//children end
           }),
           listeners:{
                   "beforeload":function()  {//第一次点击+都会触发。
                       console.log("加载数据")
                   }
           }
       });
})

七、图示

tree_Run1.jpg

tree_Run2.jpg

tree_Run5.jpg