EXT中的gridpanel自適應窗口的方法

剛纔糾結的調整新項目的頁面，其中的一個gridpanel一直沒有辦法正確顯示

先上背景

var reviewTaskPaenl = new Ext.Panel({
    layout:'border',
    items:[
        {
            region:'north',
            height:300,
            layout:'fit',
            items:{
                title:'文件列表',
                border:false,
                items:[
                    reviewFilePanel
                ]
            }

        } ,
        {
            region:'center',
            layout:'fit',
            items:{
                border:false,
                items:[
                    sqlStatementTabPanel
                ]
            }
        }
    ],
    tbar:taskHandlePanel
});

外層的panel是border類型的，內部三個部分，頂部是tbar欄，而後是filepanel，接下來是statementpanel

filepanle是一個gridpanel

var reviewFilePanel = new Ext.grid.GridPanel({
    cm:reviewFileStoreCm,
    store:reviewFileStore,
    stripeRows:true,
    loadMask:true,
    trackMouseOver:true,
    //bodyStyle:"height:100%;width:100%",
    autoScroll:true
});

現象就是下圖這樣

 

試了各類佈局都很差使，網上的解決方案是在最外層的panel中使用viewport，而後viewport用fit佈局，內部在嵌入gridpanel，是能夠自適應了，可是viewport就是整頁都顯示一個paenl了。

最終的解決方案是在gridpaenl中加bodystyle，經過CSS來調整

var reviewFilePanel = new Ext.grid.GridPanel({
    cm:reviewFileStoreCm,
    store:reviewFileStore,
    stripeRows:true,
    loadMask:true,
    trackMouseOver:true,
    bodyStyle:"height:100%;width:100%",
    autoScroll:true
});

最終終於實現了要求

 

總結一下，EXT的layout其實挺討厭的，以前沒有作個swing的程序，一直都是用div或者table來佈局，這兩天畫界面各類糾結。ext的文檔上有一些經常使用的佈局和demo，沒事的時候多看看。

http://dev.sencha.com/deploy/ext-3.4.0/examples/layout-browser/layout-browser.html