关于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. }