Ext实现tree的目录表。_new ext.tree.treepanel如何做三级目录-优快云博客

本文介绍使用ExtJS实现树形菜单的方法，并展示了如何通过点击菜单项加载相应页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var tree = new Tree.TreePanel({
            xtype: 'treepanel',
            id: 'tree-panel',
            region: 'center',
            margins: '2 2 0 2',
            autoScroll: true,
	        rootVisible: true,
	        root: new Ext.tree.AsyncTreeNode({
	    		id : 'menu',
	    		text : '功能列表',
	    		leaf : false
	    	}),
	    	loader: new Ext.tree.TreeLoader({dataUrl: 'menu.txt'}),
	        listeners: {
	            'click':function(node, event){
	            	if (node.isLeaf()) { 
	            		event.stopEvent();
	            		var n = tab.add({
	        				'id' : node.id,
	        				'title' : node.text,
	        				closable:true,
	        				html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+node.attributes.href+'"></iframe>'
	        			});
	            		tab.setActiveTab(n);
	           		} else {
	            		// 不是叶子节点不触发事件
	            		event.stopEvent();
	            	}
		        }
	        }
        });
    
        
        tree.getRootNode().expand();

然后是menu.txt的内容

[
	{'text':'学生信息采集','id':'student_info_enroll','leaf':true,'href':'page/studentInfoEnroll.html'},
	{'text':'学生信息','id':'student_info','leaf':true,'href':'page/studentInfo.html'},
	{'text':'家庭信息','id':'home_info','leaf':true,'href':'page/homeInfo.html'},
	{'text':'学生照片','id':'student_photo','leaf':true,'href':'page/studentPhoto.html'},
	{'text':'异动查询','id':'transaction_seek','leaf':true,'href':'page/transactionSeek.html'},
	{'text':'毕业信息','id':'graduate_info','leaf':true,'href':'page/graduateInfo.html'},
	{'text':'学籍卡管理','id':'enrollment','leaf':true,'href':'page/enrollment.html'},
	{'text':'成绩打印','id':'score_print','leaf':true,'href':'page/scorePrint.html'},
	{'text':'归档信息','id':'filekeeper_info','leaf':true,'href':'page/filekeeperInfo.html'}
]