Ext3.0 Ext.tree.TreePanel

一、继承图

Ext3.0 Ext.tree.TreePanel_第1张图片
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("加载数据")
                   }
           }
       });
})

七、图示

Ext3.0 Ext.tree.TreePanel_第2张图片
tree_Run1.jpg
Ext3.0 Ext.tree.TreePanel_第3张图片
tree_Run2.jpg

Ext3.0 Ext.tree.TreePanel_第4张图片
tree_Run5.jpg

你可能感兴趣的:(Ext3.0 Ext.tree.TreePanel)