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

示例9-5 单页面应用中使用Card实现“页面”切换

"

                },
                {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);
                                        }
                                }
                        }
                }
        ]
})