Extjs4表格宽度和高度自适应

开发Extjs的时候难免会遇到宽度和高度不合浏览器的情况，这种情况导致的问题是：

1.如果表格数据多了以后，右侧滚动条不出现。

2.如果表格较长的话，无论页面如何缩放，都没办法看全整个表格。

作者使用的情况是在一个tabPanel里放一个gridPanel，想让这个grid随着tabPanel的变化而自动适应窗口宽度和高度。在Extjs4中，经过前段时间的摸索，走了很多弯路。网上有些人说使用什么窗口监听，有些人说使用getCmp来获取父窗口，然后getWidth,getHeight分别来获取宽度和高度。但是这些方法在我这个上面都不成功。浏览器都是找不到对象错误。

后来看了一篇文章，上面说了，如此使用即可。

首先，tabPanel的父窗口使用border这种Layout。然后tabPanel中设置宽度和高度：

//中部标签
   var tabPanel = Ext.create('Ext.tab.Panel', {
    id: 'tabPanel',
    region: 'center',
    height: '100%',
    width: '100%',
    deferredRender: false,
    activeTab: 0,     // 初始打开第一个标签页
                items:[searchGrid]
            });

这样这个tabPanel就会自动填充整个center部分了。

然后，在grid中打开scroll。

//搜索结果表
   var searchGrid = Ext.create('Ext.grid.Panel', {
    id: 'resultGrid',
    title: '搜索结果',
    frame: true,
    scroll: true,
    viewConfig: {
     forceFit: true,
     stripeRows: true
    },
    store:initStore,
    columns:equipColumns,
    bbar:[{
     xtype:'pagingtoolbar',
     id:'pagingBar',
     store: initStore,
     displayInfo: true
    }]
   });

再将column的一些宽度设定为flex:1,这样tabPanel自适应center大小，然后grid则跟随这个tabPanel变化，实现了想要的效果。