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

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

viewConfig:{

1. layout:function(){
2. if(!this.mainBody){
3. return;//notrendered
4. }
5. varg=this.grid;
6. varc=g.getGridEl();
7. varcsize=c.getSize(true);
8. varvw=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. varhdHeight=this.mainHd.getHeight();
25. varvh=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 plain copy print ?

1. viewConfig:{
2. layout:function(){
3. if(!this.mainBody){
4. return;//notrendered
5. }
6. varg=this.grid;
7. varc=g.getGridEl();
8. varcsize=c.getSize(true);
9. varvw=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. varhdHeight=this.mainHd.getHeight();
21. varvh=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. }