Extjs grid横向滚动条

关于Extjs gridpanel设置autoHeight:true时，横向滚动条的问题 使用gridpanel时我们有时需要给设置autoHeight:true，但这时如果表格的宽度大于它的容器的宽度，多余的内容就会被隐藏而不会出现 横向的滚动条，费了老大劲儿才找到了解决办法，方法就是给gridpanel的option config添加如下属性：

view plaincopy to clipboardprint?
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);  
    }  
} 
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);
 }
}
 

解决过程中遇到了好多问题，如header的背景不全，不是所有的列都能resize（已经设置了 resizable:true），所以可能还有很多问题我没有发现。如果谁发现有什么问题，希望不吝赐教。

修改：

又发现了一个简单的方法比上边效果好多了，嘿嘿

view plaincopy to clipboardprint?
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);  
    }  
} 
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);
 }
}

 以前用2.0时候

现在直接配置

viewConfig:{
                    autoFill:true,
                    foreceFit:true
                },