加载导航的方案跳过不说，直接进入正题：如何在one site one page的项目中布局。

很多情况下我们可能会选择一个非常经典的布局，就是左边放导航树，右边放显示页面。当然航导树是不动的，而动态改变的只有右边的显示页面。

页面head部分 导航tree(不可动) 用示显示的TabPanel(内容不固定) 实现方案：

  点击导航树时，调用tabelPanel的add方法增加一个panel。而后在该panel中使用border布局。

	 	  
   Ext.Ajax.request({
	  	 url:"../../MenuList!getMenuSub.action",
	  	  params:{id: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) 
  	   } 
  })
 


这里我把当初为了学习Ext而编写的代码给当大看看，代码中可能存在一起不是很合理的地方。猛点这里

 

  如果有什么疑问欢迎到JavaScript程序园 论坛里一起交流