使用gridpanel时我们有时需要给设置autoHeight:true，但这时如果表格的宽度大于它的容器的宽度，多余的内容就会被隐藏而不会出现横向的滚动条，费了老大劲儿才到了解决办法，方法就是给gridpanel的option config添加如下属性：
Js代码
viewConfig : {     
layout : function() {     
if (!this.mainBody) {     
return; // not rendered     
css设置表格滚动条}     
var g = id;     
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.Sibling.style.cssFloat = "left";     
this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible";     
this.el.dom.Sibling.style.overflow = "visible";     
} else {     
this.el.setSize(csize.width, csize.height);     
var hdHeight = Height();     
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();     
}     
}     
}     
viewConfig : {   
layout : function() {   
if (!this.mainBody) {   
return; // not rendered   
}   
var g = id;   
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.firstChil
d.firstChild.style.cssFloat = "left";   
this.el.dom.Sibling.style.cssFloat = "left";   
this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible";   
this.el.dom.Sibling.style.overflow = "visible";   
} else {   
this.el.setSize(csize.width, csize.height);   
var hdHeight = Height();   
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();   
}   
}   
}解决过程中遇到了好多问题，如header的背景不全，不是所有的列都能resize（已经设置了resizable:true），所以可能还有很多问题我没有发现。如果谁发现有什么问题，希望不吝赐教。
修改：
Js代码
viewConfig : {     
layout : function() {     
if (!this.mainBody) {     
return; // not rendered     
}     
var g = id;     
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 = Height();     
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();     
}     
}     
}
又发现了一个简单的方法比上边效果好多了，嘿嘿

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。