Ext.TreePanel

 原文地址 点这里

 

js代码:

Ext.onReady(function(){
　 varmytree=newExt.tree.TreePanel({
　　　el:"container",//应用到的html元素id
　　　animate:true,//以动画形式伸展,收缩子节点
　　　title:"Extjs静态树",
　　　collapsible:true,
　　　rootVisible:true,//是否显示根节点
　　　autoScroll:true,
　　　autoHeight:true,
　　　width:150,
　　　lines:true,//节点之间连接的横竖线
　　　loader:newExt.tree.TreeLoader(),//
　　　root:newExt.tree.AsyncTreeNode({
　　　　　id:"root",
　　　　　text:"根节点",//节点名称
　　　　　expanded:true,//展开
　　　　　leaf:false,//是否为叶子节点
　　　　　children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
　　　})
　});
　mytree.render();//不要忘记render()下,不然不显示哦
})

 

TreePanel基本配置参数:

//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头

 

 

TreeNode的基本配置参数:

 //TreeNode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击

 

JS代码：

Ext.onReady(function(){
　　Ext.QuickTips.init();
　varmytree=newExt.tree.TreePanel({
　　　el:"container",
　　　animate:true,
　　　title:"Extjs静态树",
　　　collapsible:true,
　　　enableDD:true,
　　　enableDrag:true,
　　　rootVisible:true,
　　　autoScroll:true,
　　　autoHeight:true,
　　　width:150,
　　　lines:true
　});
　
　//根节点
　varroot=newExt.tree.TreeNode({
　　　id:"root",
　　　text:"控制面板",
　　　expanded:true
　});
　
　//第一个子节点及其子节点
　varsub1=newExt.tree.TreeNode({
　　　id:"news",
　　　text:"新闻管理",
　　　singleClickExpand:true
　});
　sub1.appendChild(newExt.tree.TreeNode({
　　　id:"addNews",
　　　text:"添加新闻",
　　　href:"http://www.baidu.com",
　　　hrefTarget:"mainFrame",
　　　qtip:"打开百度",
　　　listeners:{//监听
　　　　　"click":function(node,e){
　　　　　　　　　　　alert(node.text)
　　　　　　　　　}
　　　}
　}));
　sub1.appendChild(newExt.tree.TreeNode({
　　　id:"editNews",
　　　text:"编辑新闻"
　}));
　sub1.appendChild(newExt.tree.TreeNode({
　　　id:"delNews",
　　　text:"删除新闻"
　}));
　
　root.appendChild(sub1);
　
　root.appendChild(newExt.tree.TreeNode({
　　　　id:"sys",
　　　　text:"系统设置"
　}));
　
　mytree.setRootNode(root);//设置根节点
　
　mytree.render();//不要忘记render()下,不然不显示哦
})

 

 

html代码:

<bodystyle="margin:10px;">
　　<divid="container">
　　</div>
　　<iframename="mainFrame"id="mainFrame"height="100px"width="200px"src="jstest.htm"></iframe>
</body>

 

评论

3 楼 blueyanghualong 2009-11-23  

这个实例我在3.0下面运行的时候报了跟1楼一样的错误不知道可有人解决

2 楼 three_uncle 2009-07-02  

不好意思。。。我用的是2.2版的。。。
3.0的没用过。。。

1 楼 xuwei1985 2009-07-01  

想知道ExtJs3.0的TreePanel是否兼容性问题，因为我编写的Demo在Firefox中运行正常，在IE6.0却出了问题，在展开第二层节点时出现JavaScript Error:缺少对象。

var tree = new Ext.tree.TreePanel({
		id : "tree",
		region : "west",
		split : true,
		width : 280,
		minSize : 175,
		title : "左边面板",
		maxSize : 500,
		collapsible : true,
		margins : "0 0 5 5",
		cmargins : "0 0 0 0",
		rootVisible : false,
		lines : false,
		autoScroll : true,
		animCollapse : false,
		collapseMode : "mini",
		useArrows : true,
		animate : true,
		enableDD : true,
		containerScroll : true,
		dropConfig : {
			appendOnly : true
		},
		loader : new Ext.tree.TreeLoader({
			preloadChildren : true,
			clearOnLoad : false,
			baseParams : {},
			dataUrl : "ext.do?method=treeTest"
		}),
		root : new Ext.tree.AsyncTreeNode({
			text : "基础信息",
			id : "root",
			expanded : true,
			draggable : false,
			preloadChildren : false,
			nodeType : "async",
			requestMethod : "POST"
		})
	});

不知道three_uncle兄可遇到过这种情况吗？