关于Extjs gridpanel设置autoHeight:true时，横向滚动条的问题

使用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