加载导航的方案跳过不说，直接进入正题：如何在one site one page的项目中布局。很多情况下我们可能会选择一个非常经典的布局，就是左边放导航树，右边放显示页面。当然航导树是不动的，而动态改变的只有右边的显示页面。 页面head部分 导航tree(不可动) 用示显示的TabPanel(内容不固定) 实现方案：点击导航树时，调用tabelPanel的add方法增加一个panel。而后在该panel中使用border布局。 

 Ext.Ajax.request({ url:"../../MenuList!getMenuSub.action", params:{nid:tp.id}, method:'POST', success:function(r){ var f = new Ext.util.JSON.decode(r.responseText) for(var i=0;o=f.btn[i];i++){ tp.root.appendChild(new Ext.tree.TreeNode( { text : o.title, id:o.pageid , listeners : { 'click' : function(n) { if(!Ext.getCmp(n.id)){ Ext.getCmp(_tmpid).add({ id:n.id, title:n.text, layout:'fit', frame:true, closable:true, autoLoad:{ url:"functions/" + n.id + ".info", //functions目录下存放页面功能JS文件。文件命名是：功能模块ID.info scripts: true, scope: this, nocache: true } }); } Ext.getCmp(_tmpid).setActiveTab(Ext.getCmp(n.id)); } } })); } } })
tabpanel使用autoLoad时，要注意的是autoLoad进来的东西一定要放在一个父容器或render到一个DIV中去。否则将无法显示。当然如果你用window弹出也是可以的。最初的方法当然是第一种。这里我们采用另一种方案，就是将autoLoad进来的组件放到panel中去。实际上在tabpanel中每一个选项卡对应是一个panel，我们可对将组件放到这个panel里面。这里，我扩展了一个类出来： Tp.Panel 类 主要适用于需要放在其容器内部。配合autoLoad方式加载的JS文件。 
 /* 用法 : * new Tp.Panel({ * tabId:'tabid', //指定父容器ID * items:items //指定该容器存放的子组件 * }) * 注意：此组件不需要使用单独 的renderTo或render()去渲染 */ Tp.Panel=Ext.extend(Ext.Panel,{ collapsible:false, hideBoders:false, border:true, tabId:null, autoScroll:true, initComponent:function(){ Ext.getCmp(this.tabId).add(this); //将panel增加到tabpenel中，这里不指定布局。因为子无素不确定 Tp.Panel.superclass.initComponent.call(this) Ext.getCmp(this.tabId).doLayout(); } })
如此一来我们只需要在功能文件中加入如是代码： （上面已经写出了你自己找下哦） 如果说我们要显示的是一个表单，那么直接在panel里面加上formpanel就可以了。但如此一来会显的非常难看。因为formpanel的父类是panel所以我们考虑直接用一个formpanel代替用于显示组件的panel。看下面方案： 
 /* * Tp.FromPanel 类 主要适用于需要放在其容器内部的表单。配合autoLoad方式加载的JS文件。 * max为真时最大化显示，否示采用默认布局 * 用法： * new Tp.FromPanel({ * Max:true, * tabId:'fun1', * formid:'base', //这里的formid是用于提交 * items:[{xtype:'textfield',fieldLabel:'dddd'}] * }) * 注意：此组件不需要使用单独 的renderTo或render()去渲染 */ Tp.FormPanel=Ext.extend(Tp.Panel,{ Max:false, /* * Max默认为false 不最大化显示 */ isValid:function(){ return this.form.isValid() }, initComponent:function(){ var p ={border:false, // region: , frame:false, autoScroll:false }; Ext.applyIf(p,this) this.buttons=null p = new Ext.form.FormPanel(p) if(this.Max){ p.region = 'center' this.layout='border' } this.items = p this.form=p.getForm() this.getForm=function(){ return p.form } Tp.FormPanel.superclass.initComponent.call(this) } })