ExtJS GridPanel单元格每行宽度不一致问题及解决方法

问题场景 #

使用ExtJS的GridPanel展示变更历史表格时，出现了每行单元格宽度参差不齐的异常，表格布局完全错乱。

尝试过的无效调试操作 #

• 删除列配置中的flex:1属性
• 为所有列硬编码固定宽度值
• 设置GridPanel的forceFit:false

根因定位 #

最终排查发现问题根源：GridPanel所在的父面板本该继承Ext.panel.Panel，却错误地继承了Ext.tree.Panel。TreePanel的内部布局逻辑会干扰子GridPanel的列宽计算，从而引发单元格宽度异常。

解决方法 #

将父面板的继承类从Ext.tree.Panel修正为Ext.panel.Panel，重新运行后GridPanel的列宽恢复正常，每行单元格宽度保持一致。

内容的提问来源于stack exchange，提问作者Alexandra Vasilyeva