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变化，实现了想要的效果。