tree

Ext.onReady(function (){
  		var treeNode = new Ext.tree.TreeNode({
  			id:'root',
  			text:'<font color=blue >春峰科技</font>', 
  			leaf:false
  		});
  		// ===================student ^============================
  		var student = new Ext.tree.TreeNode({
  			id:'student',
  			text:'<font color=green >student</font>',//文字信息
  			//draggable:true,//允许拖动
  			leaf:false
  		});
  		
  		var queryStudent = new Ext.tree.TreeNode({
  			id:'queryStudent',
  			text:'show student info',
  			leaf:true
  		});
  		
  		var deleteStudent = new Ext.tree.TreeNode({
  			id:'deleteStudent',
  			text:'delete student info',
  			leaf:true
  		});
  		
  		var updateStudent = new Ext.tree.TreeNode({
  			id:'updateStudent',
  			text:'update student info',
  			leaf:true
  		});
  		
  		var addStudent = new Ext.tree.TreeNode({
  			id:'addStudent',
  			text:'add student info',
  			leaf:true
  		});
  		
  		student.appendChild(addStudent);
  		student.appendChild(deleteStudent);
  		student.appendChild(updateStudent);
  		student.appendChild(queryStudent);
  		// ===================students $============================
  		
  		// ===================users ^============================
  		var users = new Ext.tree.TreeNode({
  			id:'users',
  			text:'<font color=green >users</font>',
  			leaf:false
  		});
  		
  		var queryUsers = new Ext.tree.TreeNode({
  			id:'queryUsers',
  			text:'show users info',
  			leaf:true
  		});
  		
  		var deleteUsers = new Ext.tree.TreeNode({
  			id:'deleteUsers',
  			text:'delete users info',
  			leaf:true
  		});
  		
  		var updateUsers = new Ext.tree.TreeNode({
  			id:'updateUsers',
  			text:'update users info',
  			leaf:true
  		});
  		
  		var addUsers = new Ext.tree.TreeNode({
  			id:'addUsers',
  			text:'add users info',
  			leaf:true
  		});
  		
  		users.appendChild(addUsers);
  		users.appendChild(deleteUsers);
  		users.appendChild(updateUsers);
  		users.appendChild(queryUsers);
  		// ===================users $============================
  		
  		// ===================classes ^============================
  		var classes = new Ext.tree.TreeNode({
  			id:'classes',
  			text:'<font color=green >classes</font>',
  			leaf:false
  		});
  		
  		var queryClasses = new Ext.tree.TreeNode({
  			id:'queryClasses',
  			text:'show classes info',
  			leaf:true
  		});
  		
  		var deleteClasses = new Ext.tree.TreeNode({
  			id:'deleteClasses',
  			text:'delete classes info',
  			leaf:true
  		});
  		
  		var updateClasses = new Ext.tree.TreeNode({
  			id:'updateClasses',
  			text:'update classes info',
  			leaf:true
  		});
  		
  		var addClasses = new Ext.tree.TreeNode({
  			id:'addClasses',
  			text:'add classes info',
  			leaf:true
  		});
  		
  		classes.appendChild(addClasses);
  		classes.appendChild(deleteClasses);
  		classes.appendChild(updateClasses);
  		classes.appendChild(queryClasses);
  		// ===================classes $============================

  		treeNode.appendChild(users);
  		treeNode.appendChild(student);
  		treeNode.appendChild(classes);

  		var _west = {
			region:'west',
			id:'west',
			title:'west_tree',
			width:210,
			frame:true,
			draggable:true,//激活拖动
			collapsible:true,
			xtype: 'treepanel',
			bodyStyle:'background:url("tree/images/background.gif");bgcolor:green',
			root:treeNode,
  			listeners:{
  				click:function(_obj){
  					var _node = _obj.attributes;
  					var url = '';
  					if(_node.leaf){
  						if((_node.id).indexOf('Users') != -1){//这个要判断是users的增删查改还是其他的所以要判断下
  							url='users/'+_node.id;//拿到id当作要跳转的URL
  						} else if ((_node.id).indexOf('Student') != -1){
  							url='student/'+_node.id;
  						} else {
  							url='classes/'+_node.id;
  						}
  						var page = _center.add({
	                		id:_node.id,
	                		title:_node.text,
	                		closable:true,//可以关闭的属性
	                		autoScroll: true,
	                		html:'<iframe src=tree/'+url+'.jsp frameboder="2" height="501" width="1200" id="onlyone"></iframe>'
	                	});
	                	_center.setActiveTab(page);
  					}
  				}
  			}
			 /*new Ext.tree.AsyncTreeNode({//这也是一种实现树的方式
	           expanded: false,//设置文件夹是否打开
	           text:'春峰科技',
	           children: [{
	           	id:'users',
	               text: 'users',
	               leaf: false
	           },{
	           	id:'student',
	               text: 'student',
	               leaf: false
	           },{
	           	id:'classes',
	               text: 'classes',
	               leaf: false
	           },{
	           	id:'grade',
	               text: 'grade',
	               leaf: false
	           }]
    		})*/
  		}
  		
  		var _north = {
  			region:'north',
			title:'春峰科技_如果世界末日到了,你会怎么样呢?',
			height:200,
			frame:true,
			draggable:true,//激活拖动
			//hideCollapseTool:true, //不显示收缩的那个按钮
			titleCollapse:true,//表示在头部区域任何位置都可以收缩面板
			collapsible:true,
			html:'<iframe src=tree/border_top.jsp width=100% height=210></iframe>'
  		}
  		
  		var _center = new Ext.TabPanel({
  			region:'center',
  			title:'center',
  			frame:true,
  			xtype:'tabpanel',
  			draggable:true,//激活拖动
  			autoScroll:false,//显示滚动条
  			overflow:'auto',
  			//activeTAb:0,
 			items:[{title:"首页",closable:false,html:'<iframe src=tree/first_page.jsp width=100% height=500 frameborder=NO border=0></iframe>'}],
  			collapsible:true
 		})
  	
  		var viewport = new Ext.Viewport({
  			layout:'border',
  			items:[_north,_west,_center]
  		});
  	});