從上圖面板中那條橫線可以很清楚的看出樹面板的容器沒有使用Fit布局造成了樹面板沒有填滿整個布局，而是根據自身大小進行顯示。 實際的代碼： ~~~ var mainAccirdion = new Ext.Panel({ id: "MainAccirdion", region: 'west', split: true, layout: 'accordion', collapsible: true, width: 200, layoutConfig: { titleCollapse: false, animate: true, activeOnTop: true }, items: [{ title: '病人報告列表', items: [{ items: treepanel, flex: 1, layout: 'fit' }] } ] }) ~~~ 代碼中，首先存在的問題是，使用了不必要的嵌套布局，其實這個在第一層直接使用treepanel就可以了，沒必要再套容器。由于套多了一層布局，就造成了雖然在下一層布局使用了Fit布局，但是還是不能填滿頂層容器。 在我的書《Ext JS權威指南》的9.8.2節中有一個示例可供參考，代碼如下： ~~~ Ext.create("Ext.Viewport",{ ?layout:{type:"border",padding:5}, ?items:[ ??? ?//區域定義 ??? ?{xtype:"container",region:"north",height:30, ??? ??? ?html:"<h1>示例9-5 單頁面應用中使用Card實現“頁面”切換</h1>" ??? ?}, ??? ?{region:"west",split:true,width:200,minWidth:100, ??? ??? ?layout:"accordion", ??? ??? ?items:[ ??? ??? ??? ?{title:"產品管理",xtype:"treepanel", ??? ??? ??? ??? ?rootVisible: false, ??? ??? ???????? root: { ??? ??? ???????????? text: 'root',id: 'rootProduct', ??? ??? ??? ??? ??? ?expanded: true,children:[ ??? ??? ??? ??? ??? ??? ?{text:"產品管理",id:"Product",leaf:true}, ??? ??? ??? ??? ??? ??? ?{text:"統計管理",id:"Stat",leaf:true} ??? ??? ??? ??? ??? ?] ??? ??? ??? ??? ?}, ??? ??? ??? ??? ?listeners:{itemclick:itemclick} ??? ??? ??? ?}, ??? ??? ??? ?{title:"系統管理",xtype:"treepanel", ??? ??? ??? ??? ?rootVisible: false, ??? ??? ???????? root: { ??? ??? ???????????? text: 'root',id: 'rootSyetem', ??? ??? ??? ??? ??? ?expanded: true,children:[ ??? ??? ??? ??? ??? ??? ?{text:"用戶管理",id:"User",leaf:true}, ??? ??? ??? ??? ??? ??? ?{text:"系統設置",id:"System",leaf:true} ??? ??? ??? ??? ??? ?] ??? ??? ??? ??? ?}, ??? ??? ??? ??? ?listeners:{itemclick:itemclick} ??? ??? ??? ?} ??? ??? ?] ??? ?}, ??? ?{region:"center",layout:'card',border:false, ??? ??? ?id:"ContentPage",loader:true, ??? ??? ?items:[ ??? ??? ??? ?{title:"產品管理",id:"ProductContent",tbar:[ ??? ??? ??? ??? ?{text:"增加"},{text:"編輯"},{text:"刪除"} ??? ??? ??? ?]} ??? ??? ?], ??? ??? ?listeners:{ ??? ??? ??? ?add:function(cmp,con,pos){ ??? ??? ??? ??? ?if(this.items.length>1){ ??? ??? ??? ??? ??? ?this.getLayout().setActiveItem(pos); ??? ??? ??? ??? ?} ??? ??? ??? ?} ??? ??? ?} ??? ?} ?] }) ~~~