Extjs 4.1怎么只给树的叶节点添加监听器,

Extjs 4.1怎么只给树的叶节点添加监听器,,第1张

var store = Ext.create('Ext.data.TreeStore', {

    root : {

        children : [{

            text : '父叶',

            children : [{

                text : '子叶',

                id : 'A',

                leaf : true  // 在你的叶节点添加 leaf 属性

            }]

        }]

    }

})

// TreePanel 省略

treePanel.on('itemclick', function(view, record) {    

    if (record.get('leaf')) {

        //你的逻辑

    }

})

TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子:

一、TreePanel基本配置参数:

//TreePanel配置参数

animate:true//展开,收缩动画,false时,则没有动画效果

autoHeight:true//自动高度,默认为false

enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable

enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)

enableDrop:true//仅仅drop

lines:true//节点间的虚线条

loader:Ext.tree.TreeLoader//加载节点数据

root:Ext.tree.TreeNode//根节点

rootVisible:false//false不显示根节点,默认为true

trackMouseOver:false//false则mouseover无效果

useArrows:true//小箭头

二、TreeNode的基本配置参数:

//TreeNode常用配置参数

checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框

expanded:fasle//展开,默认不展开

href:"http:/www.cnblogs.com"//节点的链接地址

hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

leaf:true//叶子节点,看情况设置

qtip:"提示"//提示信息,不过要 Ext.QuickTips.init()下

text:"节点文本"//节点文本

singleClickExpand:true//用单击文本展开,默认为双击

三、treepanel实例:

第一个静态树--最简单的树:

Ext.onReady(function(){

   var mytree=new Ext.tree.TreePanel({

       el:"container",//应用到的html元素id

       animate:true,//以动画形式伸展,收缩子节点

       title:"Extjs静态树",

       collapsible:true,

       rootVisible:true,//是否显示根节点

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true,//节点之间连接的横竖线

       loader:new Ext.tree.TreeLoader(),//

       root:new Ext.tree.AsyncTreeNode({

           id:"root",

           text:"根节点",//节点名称

           expanded:true,//展开

           leaf:false,//是否为叶子节点

           children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]

       })

   })

   mytree.render()//不要忘记render()下,不然不显示哦

})

效果图:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11522340.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存