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

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

viewConfig : {  

1.     layout : function() {  
2.         if (!this.mainBody) {  
3.             return; // not rendered  
4.         }  
5.         var g = this.grid;  
6.         var c = g.getGridEl();  
7.         var csize = c.getSize(true);  
8.         var vw = csize.width;  
9.         if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:  
10.             // none?   
11.             return;  
12.         }  
13.         if (g.autoHeight) {  
14.             this.el.dom.style.width = "100%";  
15.             this.el.dom.style.overflow = "auto";  
16.             this.el.dom.firstChild.style.overflow = "visible";  
17.             this.el.dom.firstChild.style.cssFloat = "left";  
18.             this.el.dom.firstChild.firstChild.style.cssFloat = "left";  
19.             this.el.dom.firstChild.firstChild.nextSibling.style.cssFloat = "left";  
20.             this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible";  
21.             this.el.dom.firstChild.firstChild.nextSibling.style.overflow = "visible";  
22.         } else {  
23.             this.el.setSize(csize.width, csize.height);  
24.             var hdHeight = this.mainHd.getHeight();  
25.             var vh = csize.height - (hdHeight);  
26.             this.scroller.setSize(vw, vh);  
27.             if (this.innerHd) {  
28.                 this.innerHd.style.width = (vw) + 'px';  
29.             }  
30.         }  
31.         if (this.forceFit) {  
32.             if (this.lastViewWidth != vw) {  
33.                 this.fitColumns(false, false);  
34.                 this.lastViewWidth = vw;  
35.             }  
36.         } else {  
37.             this.autoExpand();  
38.             this.syncHeaderScroll();  
39.         }  
40.         this.onLayout(vw, vh);  
41.     }  
42. }  

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），所以可能还有很多问题我没有发现。如果谁发现有什么问题，希望不吝赐教。

 

修改：

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

[javascript] view plaincopyprint?

1. viewConfig : {  
2.     layout : function() {  
3.         if (!this.mainBody) {  
4.             return; // not rendered  
5.         }  
6.         var g = this.grid;  
7.         var c = g.getGridEl();  
8.         var csize = c.getSize(true);  
9.         var vw = csize.width;  
10.         if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:  
11.             // none?   
12.             return;  
13.         }  
14.         if (g.autoHeight) {  
15.             if (this.innerHd) {  
16.                 this.innerHd.style.width = (vw) + 'px';  
17.             }  
18.         } else {  
19.             this.el.setSize(csize.width, csize.height);  
20.             var hdHeight = this.mainHd.getHeight();  
21.             var vh = csize.height - (hdHeight);  
22.             this.scroller.setSize(vw, vh);  
23.             if (this.innerHd) {  
24.                 this.innerHd.style.width = (vw) + 'px';  
25.             }  
26.         }  
27.         if (this.forceFit) {  
28.             if (this.lastViewWidth != vw) {  
29.                 this.fitColumns(false, false);  
30.                 this.lastViewWidth = vw;  
31.             }  
32.         } else {  
33.             this.autoExpand();  
34.             this.syncHeaderScroll();  
35.         }  
36.         this.onLayout(vw, vh);  
37.     }  
38. }