初學者比較容易犯的布局錯誤（手風琴布局）

650) this.width=650;" src="../attachment/201304/133601979.jpg" alt="" border="0" />

從面板中那條橫線可以很清楚的看出樹面板的容器沒有使用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);
                                        }
                                }
                        }
                }
        ]
})