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