(Ext)发帖，散分，大家都来讨论讨论

fly_to_sky 2009-04-03 03:13:21

最近一直在学习Ext相关知识，每天都很忙，每天都感觉时间过的很快，虽然每天都有收获每天都有新发现，但是，仔细的想想，其实，也没啥！有点痛苦，有点迷茫，清醒一点点麻木，麻木一点清醒，残酷、孤独、无助，但也有种前所未有的归属、充实与快乐！我真的无法用言语来形容那种“东西” 。好了，下面就开始我们今天的主题吧！今天我要做的是介绍 TreePanel的一些运用。也希望大家多多指教，有什么高招分享一下，

由静态数据生成静态树形菜单：
例1：简单生气树形菜单
代码：

最近一直在学习Ext相关知识，每天都很忙，每天都感觉时间过的很快，虽然每天都有收获每天都有新发现，但是，仔细的想想，其实，也没啥！有点痛苦，有点迷茫，清醒一点点麻木，麻木一点清醒，残酷、孤独、无助，但也有种前所未有的归属、充实与快乐！我真的无法用言语来形容那种“东西” 。好了，下面就开始我们今天的主题吧！今天我要做的是介绍 TreePanel的一些运用。



由静态数据生成静态树形菜单：

例1：简单生气树形菜单

代码：

var root=new Ext.tree.TreeNode({text:"root"});  //声明根节点

	var node2=new Ext.tree.TreeNode({text:"根节点2"});//声明一个子节点

	var node3=new Ext.tree.TreeNode({text:"根节点3"});//声明一个子节点

	var node4=new Ext.tree.TreeNode({text:"根节点4"});//声明一个子节点

	var node1=new Ext.tree.TreeNode({text:"根节点1"});//声明一个子节点



	node2.appendChild(node3);//节点2添加子节点3

	node2.appendChild(node4);

	root.appendChild(node2);

	root.appendChild(node1);



	var tree2=new Ext.tree.TreePanel({

		title:"自定义数据",   //树形菜单标题

		width:300,			//树形菜单宽度

		height:300,			//树形菜单高度

		frame:true,          //采用渲染

		draggable:false,      //不允许拖拽

		el:"tree"            //在 HTML页面中ID为tree的标签中显示

	});

	tree2.setRootNode(root);   //设置TreePanel的根节点为root

	tree2.render();            //加载



例2：运用appendChild()方法添加子节点

代码：

var treePanel=new Ext.tree.TreePanel({

		applyTo:Ext.get("tree2"),

		title:"菜单标题",

		frame:true,

		width:300,

		height:400,

		root : new Ext.tree.TreeNode({

			id : 'root',

			text : '网页查看',

			draggable : false,  //false默认设置，不能被拖拽

			expanded : true  //设置菜单展开

		})/**/



	});

	//添加子节点

	treePanel.root.appendChild(new Ext.tree.TreeNode({

		id : 'htmlPanel',

		text : '百度',

		listeners : { 

			'click' : function(node, event) {

				event.stopEvent();

				window.open("http://www.baidu.com");

			}

		}

	}));

	//添加子节点

	treePanel.root.appendChild(new Ext.tree.TreeNode({

		id:"sinaPage",

		text:"新浪",

		expanded:true,

		listeners:{

			"click":function(node,event){

				event.stopEvent();

				window.open("http://www.sina.com");

			}

		}

	}));

	var node=treePanel.getNodeById("sinaPage"); //获取子节点

	node.appendChild(new Ext.tree.TreeNode({

		id:"page1",

		text:"新闻",

		listeners:{

			"click":function(node,event){

				event.stopEvent();

				window.open("http://book.sina.com.cn/");

			}

		}

	}));

	//添加子节点的子节点

	node.appendChild(new Ext.tree.TreeNode({

		id:"page2",

		text:"影视",

		listeners:{

			"click":function(node,event){

				event.stopEvent();

				window.open("http://book.sina.com.cn/");

			}

		}

	}));

	//添加子节点的子节点

	node.appendChild(new Ext.tree.TreeNode({

		id:"page3",

		text:"体育",

		listeners:{

			"click":function(node,event){

				event.stopEvent();

				window.open("http://book.sina.com.cn/");

			}

		}

	}));