ExtJs关于grid高度自适应浏览器的问题解决办法

最新推荐文章于 2021-02-23 12:26:08 发布

转载最新推荐文章于 2021-02-23 12:26:08 发布 · 1.3k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在ExtJS中实现网格组件(grid)的自适应高度功能，包括使用JavaScript获取并设置grid高度，以及在窗口重绘时自动调整高度，确保其能够适应容器的大小变化。

ExtJs中对于grid适应高度问题相信很多人都遇到过，宽度当然好说，高度设置了百分比结果始终不能适应容器高度。

解决思路是，加载完成时，获取document对象的高度，减去grid上面其他panel的高度（如果页面只有一个grid的话可以省去这一步），然后结果付给grid的高度。

当浏览器高度变化的时候，调用window对象的onresize方法，再次按照上述步骤，重新调整grid的高度。实现自适应高度。

//设置grid高度
   
grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
   
//窗口重绘时改变grid高度
   
window.onresize=function(){ 
       
grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
   
};