p.js

Exjs源码 简单布局根据需要自行添加功能

//生成标签页
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"></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"></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
	});
});