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