//生成标签页 var tab = new Ext.TabPanel({ region:'center', deferredRender:false, activeTab:0, resizeTabs:true, // turn on tab resizing minTabWidth: 115, tabWidth:135, enableTabScroll:true }); Ext.onReady(function(){ //layout var viewport = new Ext.Viewport({ layout:'border', items:[ new Ext.BoxComponent({ region:'north', el: 'north', height:80 }),new Ext.BoxComponent({ region:'south', el: 'south', height:25 }),{ region:'west', id:'west-panel', split:true, width: 200, minSize: 175, maxSize: 400, margins:'0 0 0 0', layout:'accordion', title:'XXX管理', collapsible :true, layoutConfig:{ animate:true }, items: [ { title:'用户管理', border:false, html:'<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>' //iconCls:'nav' },{ title:'信息中心', border:false, //iconCls:'settings', html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>' },{ title:'系统设置', border:false, //iconCls:'settings', html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>' }] }, tab//初始标签页 ] }); var root2=new Ext.tree.TreeNode({ id:"root2", text:"树的根" }); var c1=new Ext.tree.TreeNode({ id:'c1', icon:'img/im2.gif', text:'信息征集', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserAdd.htm" mce_src="UserAdd.htm"></iframe>' }); } tab.setActiveTab(n); } } }); var c2=new Ext.tree.TreeNode({ id:'c2', icon:'img/im2.gif', text:'bug征集', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserAdd.htm" mce_src="UserAdd.htm"></iframe>' }); } tab.setActiveTab(n); } } }); var c22=new Ext.tree.TreeNode({ id:'c22', icon:'img/im2.gif', text:'实例征集' }); var c3=new Ext.tree.TreeNode({ id:'c3', icon:'img/im2.gif', text:'给我留言' }); var c4=new Ext.tree.TreeNode({ id:'c4', icon:'img/im2.gif', text:'留言列表' }); c1.appendChild(c2); c1.appendChild(c22); root2.appendChild(c1); root2.appendChild(c3) var tree2=new Ext.tree.TreePanel({ renderTo:"tree1", root:root2, //对应 根节点 animate:true, enableDD:false, border:false, rootVisible:false, containerScroll: true }); });<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXX管理系统</title> <link rel="stylesheet" type="text/css" href="css/ext-all.css" mce_href="css/ext-all.css" /> <mce:script type="text/javascript" src="js/ext-base.js" mce_src="js/ext-base.js"></mce:script> <mce:script type="text/javascript" src="js/ext-all.js" mce_src="js/ext-all.js"></mce:script> <mce:script type="text/javascript" src="js/ext-lang-zh_CN.js" mce_src="js/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.BLANK_IMAGE_URL = 'img/s.gif'; // --></mce:script> </head> <body> <div id="loading-mask" style=""></div> <div id="loading"> <div class="loading-indicator"> </div> <mce:script type="text/javascript" src="p.js" mce_src="p.js"></mce:script> <div id="north"> <p class="api-title"><b>XXXXX管理系统</b> </div> <div id="west"> </div> <div id="south"> <div style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;" mce_style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;"> Power By: <span style="color:blue" mce_style="color:blue">XXXXX管理系统</span> </div> <div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;" mce_style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;"> 版权所有:XXXXX管理系统</div> </div> <div id="center2"></iframe></div> </body> </html> //设置树的点击事件 function treeClick(node,e) { if(node.isLeaf()){ e.stopEvent(); var n = tab.getComponent(node.id); if (!n) { var n = tab.add({ 'id' : node.id, 'title' : node.text, closable:true, html : '我是"'+node.text+'"' }); } tab.setActiveTab(n); } } //生成标签页 var tab = new Ext.TabPanel({ region:'center', deferredRender:false, activeTab:0, resizeTabs:true, // turn on tab resizing minTabWidth: 115, tabWidth:135, enableTabScroll:true }); Ext.onReady(function(){ //layout var viewport = new Ext.Viewport({ layout:'border', items:[ new Ext.BoxComponent({ region:'north', el: 'north', height:80 }),new Ext.BoxComponent({ region:'south', el: 'south', height:25 }),{ region:'west', id:'west-panel', split:true, width: 200, minSize: 175, maxSize: 400, margins:'0 0 0 0', layout:'accordion', title:'系统菜单', collapsible :true, layoutConfig:{ animate:true }, items: [ { title:'EXT控件使用', border:false, html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>' //iconCls:'nav' },{ title:'信息中心', border:false, //iconCls:'settings', html:'<div id="tree" style="overflow:auto;width:100%;height:100%"></div>' },{ title:'系统设置', border:false, //iconCls:'settings', html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>' }] }, tab//初始标签页 ] }); //设置树形面板 var Tree = Ext.tree; // set the root node var root = new Tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, id:'root' }); var tree = new Tree.TreePanel({ el:'tree-div', autoScroll:true, root:root, animate:true, enableDD:false, border:false, rootVisible:false, containerScroll: true, loader: new Tree.TreeLoader({ dataUrl:'treedata.php' }) }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); tree.on('click',treeClick); //tree2 var root2=new Ext.tree.TreeNode({ id:"root2", text:"树的根" }); var c1=new Ext.tree.TreeNode({ id:'c1', icon:'img/im2.gif', text:'信息征集' }); var c2=new Ext.tree.TreeNode({ id:'c2', icon:'img/im2.gif', text:'bug征集' }); var c22=new Ext.tree.TreeNode({ id:'c22', icon:'img/im2.gif', text:'实例征集' }); var c3=new Ext.tree.TreeNode({ id:'c3', icon:'img/im2.gif', text:'给我留言' }); var c4=new Ext.tree.TreeNode({ id:'c4', icon:'img/im2.gif', text:'留言列表' }); var c5=new Ext.tree.TreeNode({ id:'c5', text:'更新公告' }); var root3=new Ext.tree.TreeNode({ id:"root3", text:"根" }); c1.appendChild(c2); c1.appendChild(c22); root2.appendChild(c1); root2.appendChild(c3); root2.appendChild(c4); root3.appendChild(c5); var tree2=new Ext.tree.TreePanel({ renderTo:"tree", root:root2, animate:true, enableDD:false, border:false, rootVisible:false, containerScroll: true }); var tree3=new Ext.tree.TreePanel({ renderTo:"tree3", root:root3, animate:true, enableDD:false, border:false, rootVisible:false, containerScroll: true }); //end loding setTimeout( function() { Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({remove:true}); }, 250 ); });