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