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();
}