从上图面板中那条横线可以很清楚的看出树面板的容器没有使用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);                  }              }          }      }  ] }) ~~~