ExtJS 使用点滴 十二 ViewPort 嵌套及TreePanel 宽度高度自适应

近来在开发过程中，遇到这样的情况：在Viewport 布局中，实现左二右一排列方式，并且需要在左下嵌入TreePanel,该TreePanel的高度需要随左上的伸缩进行自动适应，经过近两天的苦战，解决了该问题。代码如下，如有不同意见请留言。

///<reference path="http://www.cnblogs.com/../BaseLib/ExtJS/vswd-ext_2.0.2.js" />
Ext.BLANK_IMAGE_URL = "http://www.cnblogs.com/../baselib/extjs/resources/images/default/s.gif";

//项目结构数据
var ProjData = new Ext.data.JsonStore({
    url:"PMS_WBS.ashx?tablename=viewdetail&ParentSysID=0",
    root:"projdata",     //包含数据行集合的属性名字
    totalProperty: "results",  //数据集中全部记录数
    remoteSort:true, // 排序的时候是否通过proxy获得新的数据
      fields: [ {name: 'Col1'},
                {name: 'Col2'},
                {name: 'Col3'}
    ],
    autoLoad : true
});
//作业反馈信息列表
var ProjGrid = new Ext.grid.GridPanel({
    //margins: '2 2 2 2',   
    xtype: 'grid',  
    id: 'id_ProjList',  
    //height:260,  
    //selModel: selModel, //设置单行选中模式
    autoScroll: true,   
    stripeRows:true,
    //collapsible: true,
    selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式
    columns: [ new Ext.grid.RowNumberer(),{
           header: '系统编号', 
           width: 0, 
           align: 'center',
           dataIndex: 'Col1',
           hidden:true
       },{
           header: '项目编号', 
           width:110, 
           align: 'left',
           dataIndex: 'Col2',
           hidden:true
       },
       {
           header: '项目名称', 
           width: 265, 
           align: 'left',
           dataIndex: 'Col3',
           renderer:function (v, params, record)
           {
             return "<div title="+record.data.Col2+">"+v+"</div>";
           }
       }],
      store:ProjData,             
      split: true,
      listeners:{
          click:function()
          {
            var gridProj=Ext.getCmp("id_ProjList");
            var rowProj = gridProj.getSelectionModel().getSelected();
            var wbsid=rowProj.data.Col1;
            if(!rowProj) return;
            if(rowProj.length==0) return;
             Ext.getDom("hidProjID").value=rowProj.data.Col1;
            Ext.getDom("hidWbsID").value='*';           
            getTaskList(true);
            setTimeout("LoadWbsTree()",200);
            
          } 
      }
});

var WBS_Tree= new Ext.tree.TreePanel({       
        xtype:"treepanel",
        id:"treeWBS",               
        expanded: true,  
        anchor:'100% 100%',
        autoScroll:true, 
        rootVisible : false,
        root:new Ext.tree.AsyncTreeNode({
                id : '0', 
                text : 'WBS结构', 
                draggable : false,   //根节点不容许拖动 
                expanded : true                            
            }),
        loader:new Ext.tree.TreeLoader(),    //绑定树的加载器
        listeners:{
            beforeload:function(node){                        
                var id = node.id;
                Ext.getDom("hidNode").value=node.id;
                this.loader.dataUrl = "PMS_WBS.ashx?tablename=view&ParentSysID="+encodeURIComponent(node.id);
               // getTaskList();
            },            
            click:function(node){
                Ext.getDom("hidWbsID").value=node.id;
                getTaskList(false);
            }
        }   
  });
  
Ext.onReady(function(){	
     //初始化信息提示功能
    Ext.QuickTips.init();
    new Ext.Viewport({
		layout: 'border',
		items : [{                    
                region : 'west',                
                width:315,  
                title:'项目及类别信息',            
                collapsible: true,
                split:true,
                //layout: 'fit', 
                frame:false,
                xtype:'panel',
                layout:'anchor',
                layoutConfig:{columns:1},
                items:[
                {                 
                   bodyStyle:'height:200',
                   title:'项目信息',  
                   region:'west',
                   anchor:'100% 28%', //设置子面板的宽高为父面板100%，28%
                   layout: 'fit', 
                   collapsible: true,                  
                   items:[ProjGrid],
                   listeners:{                   
                   'expand':function(panel)
                   {               
                     Ext.getCmp("id_wbs_tree").setSize(panel.getWidth(),panel.ownerCt.getHeight()-panel.getHeight()-28);
                   },                   
                   'collapse':function(panel)
                   {
                     Ext.getCmp("id_wbs_tree").setSize(panel.getWidth(),panel.ownerCt.getHeight()-panel.getHeight()-28);                     
                   }                   
                  }                     
                },
                {
                    title:'计划类别', 
                    split:true,
                    autoScroll:true,
                    id:'id_wbs_tree',          
                    region:'south', 
                    anchor:'100% 72.5%',                    
                    layout: 'fit', 
                    //bodyStyle:'height:100%',                   
                    xtype: 'panel',
                    collapsible: true,                                       
                    items:[WBS_Tree]                    
                }]            
            },{
			title:'作业信息',                     
            layout: 'fit',
            region:'center',            
            xtype: 'panel',
            frame:false,            
            items:[TaskList_Grid]  
	     }]	
	   });
   });       
          
  
function LoadWbsTree()
{    
        var rootNode = Ext.getCmp("treeWBS").getRootNode();
        var loader = Ext.getCmp("treeWBS").getLoader();
        var SysID=Ext.getDom("hidProjID").value;
		// 更新TreeLoader的地址
		loader.dataUrl = "PMS_WBS.ashx?tablename=view&ParentSysID="+encodeURIComponent(SysID)
		// 为根节点重新加载子节点数据
		loader.load(rootNode);
		// 展开根节点的数据
		//rootNode.expand(true,true);
		rootNode.expand(true);
		// getTaskList();
}