初学者比较容易犯的布局错误（手风琴布局）

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