一个简单的后台布局
<html><head><meta charset="UTF-8" /><title>ext_st_index</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="extjs/src/locale/ext-lang-zh_CN.js"></script></head><body><script> Ext.onReady(function(){ var top = new Ext.Panel({ region: 'north',title: 'title', html: '33333', autoHeight: true, height: 200, border: false, margins: '0 0 5 0' }); var center = new Ext.TabPanel({ region: 'center',items:{ id:'index', title:'首页', html:'欢迎进入小说管理系统' }, enableTabScroll:true }); center.setActiveTab('index'); var root = new Ext.tree.TreeNode({id:'root',text : '根节点' }); var node1 = new Ext.tree.TreeNode({text : '书籍类型维护',id:node1 }); var node2 = new Ext.tree.TreeNode({text : '书籍维护',id: node2,url : 'www.qidian.com' }); var node11 = new Ext.tree.TreeNode({text : '添加书籍类型维护',url : '5-21.html', }); var node12 = new Ext.tree.TreeNode({text : '删除书籍类型维护',url : 'http://www.baidu.com' }); node1.appendChild(node11); node1.appendChild(node12); root.appendChild(node1); root.appendChild(node2); var left = new Ext.tree.TreePanel({region: 'west', xtype: 'treepanel', collapsible: true, title: 'Navigation', width: 200, autoScroll: true, split: true,//root:root,listeners: { click: function(n) { var url= n.attributes.url; var id= n.attributes.id;//alert(id+'-----'+url); var p = center.getItem(id); if(url){ if(p){ center.setActiveTab(p); }else{ p= new Ext.Panel({title:n.attributes.text,autoLoad:{url:url,scripts:true},closable:true,id:id }); center.add(p); center.setActiveTab(p); } }}} }); left.setRootNode(root); var bottom = new Ext.Panel({ region: 'south', title: 'Information', collapsible: true, html: '版权所有', split: true, height: 100, minHeight: 100 }); var vp = new Ext.Viewport({ layout:'border', items:[top,left,center,bottom], renderTo : Ext.getBody() }); left.expandAll(); });</script></body></html>