ExtJS GridPanel横向滚动条问题解决方案

在Extjs的开发中，gridpanel的横向滚动条问题是个让人头疼但又常见的坑。明明数据列看起来不多，但表格偏偏多出一条横向滚动条，既不美观，又影响操作体验。这里分享一个经验结论：问题往往出在布局计算上，特别是表格在初始化时对宽度和列宽的判断出了偏差。

实际操作下来，最有效的解决办法是在gridpanel的viewConfig中重写layout方法。通过手动控制表格主体和滚动区域的宽度，让内部容器与实际可用宽度保持一致，从根源上杜绝多余的滚动条冒出。

具体实现如下：

viewConfig : { 
    layout : function() { 
        if (!this.mainBody) { 
            return; // not rendered 
        } 
        var g = this.grid; 
        var c = g.getGridEl(); 
        var csize = c.getSize(true); 
        var vw = csize.width; 
        if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: none? 
            return; 
        } 
        if (g.autoHeight) { 
            if (this.innerHd) { 
                this.innerHd.style.width = (vw) + 'px'; 
            } 
        } else { 
            this.el.setSize(csize.width, csize.height); 
            var hdHeight = this.mainHd.getHeight(); 
            var vh = csize.height - (hdHeight); 
            this.scroller.setSize(vw, vh); 
            if (this.innerHd) { 
                this.innerHd.style.width = (vw) + 'px'; 
            } 
        } 
        if (this.forceFit) { 
            if (this.lastViewWidth != vw) { 
                this.fitColumns(false, false); 
                this.lastViewWidth = vw; 
            } 
        } else { 
            this.autoExpand(); 
            this.syncHeaderScroll(); 
        } 
        this.onLayout(vw, vh); 
    } 
}

这段代码的核心逻辑在于：先获取表格容器的实际可用尺寸，然后分别处理头部和滚动区域。通俗地讲，就是告诉表格“别自作主张去猜测宽度，直接以你爹（父容器）给你的尺寸为准”。当表格列数较多或启用forceFit时，这个方案能稳定地消除多余的横向滚动条。

从实际效果来看，这个方法适用大多数Extjs版本，无论是3.x还是4.x都跑得很稳。需要额外注意的一个细节是：如果表格被包裹在tab面板或手风琴面板等动态隐藏的容器中，初始布局时可能获取到的宽度为0。这种情况下，代码中的宽度小于20的检查会直接返回，避免抛出异常。待面板显示后，通过resize事件重新触发布局即可恢复正常。

总之，只要表格的宽度计算和容器保持一致，横向滚动条就不会乱跳。这个思路比各种逐列调整宽度的“偏方”要靠谱得多。