Ext JS 3.4 GridPanel添加元素后高度为0（仅服务器端出现）

嘿，看了你遇到的Ext JS 3.4 GridPanel服务器端高度异常问题，我之前也碰过类似的布局坑，结合你给出的所有信息，咱们来梳理下这个问题：

用Ext JS 3.4开发网格数据展示功能时，在其他面板新增两个删除按钮后，部分GridPanel的高度被自动设为0。这个问题只在服务器端LEMP环境出现，本地XAMPP环境完全正常：

• 正常显示效果：正确显示截图
• 异常显示效果：异常显示截图

相关代码片段 #

GridPanel 实现代码 #

var timeStampGrid = new Ext.grid.GridPanel({ 
    border : false, 
    stripeRows : true, 
    store : timestampJsonStore, 
    colModel : colTimestampModel, 
    tbar : timestampToolbar, 
    loadMask : true, 
    autoExpandColumn : 'timeValue', 
    bbar : pagingToolbar, 
    selModel : new Ext.grid.RowSelectionModel({ 
        listeners : { 
            'rowselect' : function(model, index) { 
                currentRow = index; 
            } 
        } 
    }) 
}); 

新增按钮代码 #

/*** delete top banner ***/ 
var delete_top_banner_Btn = new Ext.Button({ 
    text : Lang.translate('DELETE_TOP_BANNER'), 
    icon : 'js/images/delete.png', 
    handler : onTopBannerDelete 
}); 

/*** delete buttom banner ***/ 
var delete_buttom_banner_Btn = new Ext.Button({ 
    text : Lang.translate('DELETE_BUTTOM_BANNER'), 
    icon : 'js/images/delete.png', 
    handler : onButtomBannerDelete 
}); 

已完成的排查操作 #

你已经做了很全面的排查，这些信息很关键：

• 移除新增按钮后，GridPanel显示恢复正常；
• 添加其他类型新元素（标签、网格）仍会触发异常；
• 手动设置GridPanel的height和width属性，问题依旧存在；
• 更换不同浏览器测试，异常未消失；
• 移除当前出现问题的GridPanel，异常会转移至相邻网格；
• 将新增按钮移至网站其他区域，问题仍然出现。

本地与服务器环境差异 #

• 服务器：虚拟LEMP环境（Nginx 1.4.6 + PHP 5.5.9 + MySQL）；
• 本地：Windows 10 XAMPP环境（PHP 5.6.15）；
• 两端使用的Ext JS版本均为3.4，且使用完全相同的静态文件。

你尝试修改本地PHP版本复现问题未果，官方已知问题里也没找到相关记录，只在Stack Overflow看到过类似案例。

针对性解决方案建议 #

结合Ext JS 3.x的布局机制特性，给你几个可以尝试的方向：

1. 强制触发父容器布局重计算
   Ext JS 3.x的布局计算有时候会因为组件添加顺序或渲染时机问题出现偏差，在新增按钮添加到容器后，手动调用父容器的doLayout()方法，强制重新计算所有子组件的尺寸：

   // 假设按钮添加到的父容器是parentContainer
   parentContainer.doLayout(true);
   // 如果不确定父容器，也可以从GridPanel向上查找
   timeStampGrid.ownerCt.doLayout(true);
   

2. 确保DOM加载顺序正确
   服务器端环境的DOM加载速度可能和本地有差异，所有组件的初始化代码最好都包裹在Ext.onReady()中，确保在DOM完全就绪后再执行组件创建和添加操作：

   Ext.onReady(function() {
       // 先初始化按钮
       var delete_top_banner_Btn = new Ext.Button({ ... });
       var delete_buttom_banner_Btn = new Ext.Button({ ... });
       // 再初始化GridPanel并添加到容器
       var timeStampGrid = new Ext.grid.GridPanel({ ... });
       parentContainer.add([delete_top_banner_Btn, delete_buttom_banner_Btn, timeStampGrid]);
       parentContainer.doLayout();
   });
   

3. 显式约束GridPanel的布局属性
   尝试给GridPanel显式设置autoHeight: false，同时确保它的父容器使用了合适的布局（比如fit、border或者vbox/hbox布局），避免隐式的尺寸计算冲突：

   var timeStampGrid = new Ext.grid.GridPanel({ 
       border : false, 
       stripeRows : true,
       autoHeight: false, // 显式关闭自动高度
       // ... 其他原有属性
   }); 
   

4. 检查服务器端输出的HTML结构
   对比本地和服务器端生成的HTML源码，看看服务器端是否输出了额外的空白字符、注释或者DOM结构差异，这些细微的差异可能会干扰Ext JS的布局计算逻辑。

5. 延迟GridPanel的初始化时机
   尝试在按钮添加完成后延迟一小段时间再初始化GridPanel，避开布局计算的冲突窗口：

   // 先添加按钮
   parentContainer.add([delete_top_banner_Btn, delete_buttom_banner_Btn]);
   parentContainer.doLayout();
   // 延迟初始化GridPanel
   setTimeout(function() {
       var timeStampGrid = new Ext.grid.GridPanel({ ... });
       parentContainer.add(timeStampGrid);
       parentContainer.doLayout();
   }, 100);
   

内容的提问来源于stack exchange，提问作者Darius-Valer Micu