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] }); });
tree
最新推荐文章于 2024-05-16 14:42:51 发布