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:
JS Code
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.css float = "Left ";
This.el.dom.firstchild.firstchild.style.css float = "Left ";
This.el.dom.firstchild.firstchild.nextsibling.style.css float = "Left ";
This. El. Dom. 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 VL = csize. Height-(hdheight );
This. scroller. setsize (VW, VL );
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, FLAC );
}
}
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.css float = "Left ";
This.el.dom.firstchild.firstchild.style.css float = "Left ";
This.el.dom.firstchild.firstchild.nextsibling.style.css float = "Left ";
This. El. Dom. 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 VL = csize. Height-(hdheight );
This. scroller. setsize (VW, VL );
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, FLAC );
}
} A lot of problems 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:
JS Code
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 VL = csize. Height-(hdheight );
This. scroller. setsize (VW, VL );
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, FLAC );
}
}
Another simple method is found to be much better than the above method.