
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()下,不然不显示哦
})
效果图:
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)