使用gridpanel时我们有时需要给设置autoHeight:true,但这时如果表格的宽度大于它的容器的宽度,多余的内容就会被隐藏而不会出现横向的滚动条,费了老大劲儿才找到了解决办法,方法就是给gridpanel的option config添加如下属性:
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) { this.el.dom.style.width = "100%"; this.el.dom.style.overflow = "auto"; this.el.dom.firstChild.style.overflow = "visible"; this.el.dom.firstChild.style.cssFloat = "left"; this.el.dom.firstChild.firstChild.style.cssFloat = "left"; this.el.dom.firstChild.firstChild.nextSibling.style.cssFloat = "left"; this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible"; this.el.dom.firstChild.firstChild.nextSibling.style.overflow = "visible"; } 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); } } 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/luwenhe/archive/2010/01/19/5213768.aspx
解决过程中遇到了好多问题,如header的背景不全,不是所有的列都能resize(已经设置了resizable:true),所以可能还有很多问题我没有发现。如果谁发现有什么问题,希望不吝赐教。
修改:
又发现了一个简单的方法比上边效果好多了,嘿嘿
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); } } 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/luwenhe/archive/2010/01/19/5213768.aspx