The problem about horizontal scroll bars when extjs gridpanel sets autoheight: True.

When using gridpanel, we sometimes need to set autoheight: true. However, if the table width is greater than the container width, the excess content will be hidden without a horizontal scroll bar, the solution was found only after the boss tried to add the following attributes to the option config of gridpanel:

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.css float = "Left ";
18. This.el.dom.firstchild.firstchild.style.css float = "Left ";
19. This.el.dom.firstchild.firstchild.nextsibling.style.css float = "Left ";
20. This. El. Dom. 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 VL = csize. Height-(hdheight );
26. This. scroller. setsize (VW, VL );
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, FLAC );
41. }
42. }

Viewconfig: {<br/> layout: function () {<br/> If (! This. mainbody) {<br/> return; // not rendered <br/>}< br/> var G = This. GRID; <br/> var c = G. getgridel (); <br/> var csize = C. getsize (true); <br/> var vw = csize. width; <br/> If (! G. hideheaders & (VW <20 | csize. height <20) {// display: <br/> // none? <Br/> return; <br/>}< br/> If (G. autoheight) {<br/> This. el. dom. style. width = "100%"; <br/> This. el. dom. style. overflow = "Auto"; <br/> This. el. dom. firstchild. style. overflow = "visible"; <br/> this.el.dom.firstchild.style.css float = "Left"; <br/> define float = "Left"; <br/> define float = "Left "; <br/> This. el. dom. firstchi LD. firstchild. firstchild. style. overflow = "visible"; <br/> This. el. dom. firstchild. firstchild. nextsibling. style. overflow = "visible"; <br/>} else {<br/> This. el. setsize (csize. width, csize. height); <br/> var hdheight = This. mainhd. getheight (); <br/> var VL = csize. height-(hdheight); <br/> This. scroller. setsize (VW, VL); <br/> If (this. innerhd) {<br/> This. innerhd. style. width = (VW) + 'px '; <br/>}< br/>} <Br/> If (this. forcefit) {<br/> If (this. lastviewwidth! = VW) {<br/> This. fitcolumns (false, false); <br/> This. lastviewwidth = VW; <br/>}< br/>} else {<br/> This. autoexpand (); <br/> This. syncheaderscroll (); <br/>}< br/> This. onlayout (VW, FLAC); <br/>}< br/> 

Many problems have been encountered during the solution, such as incomplete background of the header, not all columns can be resize (resizable: True has been set), so there may be many problems I have not found. If anyone finds any problems, I hope you can give me some advice.

 

Modify:

Another simple method is found to be much better than the above method.

[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 VL = csize. Height-(hdheight );
22. This. scroller. setsize (VW, VL );
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, FLAC );
37. }
38. }