Extjs Grid Panel滚动条失效修复方法

ExtJS GridPanel 滚动条失效的常见问题与处理方法

先说一个常见的坑：用 ExtJS 的 gridPanel 时，经常要对 store 里的数据做过滤，这时候 gridPanel 自带的滚动条很容易突然“罢工”——无论你怎么拖，表格里的数据永远定格在那几行，动都不动。

其实这个滚动条的失效原因，说白了就是 gridPanel 内部为滚动条预留了一个固定的列宽。一旦过滤导致数据动态变化，这个预留列宽和实际内容对不上了，滚动条就跟实际数据“失联”了。至于深层原因，官方也没给个准话。早年在 ExtJS 论坛和 StackOverflow 上都有人提过类似问题，主要集中在 4.1 之前的版本。ExtJS 团队声称从 4.1 开始已经修复（不过我没验证过，用 4.1 的朋友可以试试）。

问题来了：如果真遇上了，怎么绕过去？

xtype: 'gridpanel',
// autoScroll:true,
scroll:false, 
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}

关键做法就是：关掉 autoScroll，把 scroll 设为 false，然后在 viewConfig 里手动控制溢出——这里只保留纵向滚动条，把横向的禁掉。效果立竿见影：

注意看截图里，滚动条不再独占一整列，而是直接“贴”在 grid 的最后一列旁边。这样 gridPanel 自带的那个滚动条就被彻底屏蔽了，潜在的 bug 也就绕过去了。

当然，这样改有个前提：最好把所有列都设好固定宽度，并加上 resizable: false。否则不小心拖拽列宽，横向内容越界，禁用横向滚动条就会带来新的麻烦。