Extjs scroll bar processing

Bodystyle: 'overflow-X: hidden; overflow-Y: Scroll ', // hide the horizontal scroll bar and use overflow-X: visible

Hidden hide scroll: must have auto: automatic

This method can be used to display or hide the scroll bar.

VaR form = new Ext. Form. formpanel ({
Frame: True,
Labelwidth: 80,
Height: 400,
Autoscroll: True,
Bodystyle: 'overflow-X: hidden; overflow-Y: Scroll ',
Items: []

})

How to move the Panel scroll bar to the bottom in extjs

Extjs API:
Autoscroll: Boolean
True indicates that overflow: 'auto' is set on the panel Body element '...
"True" indicates the Panel Body element. "overflow: 'auto'" and "scroll bar" "false" indicates that all overflow content is cropped. The default value is "false ). True to use overflow: 'auto' on the Panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (ults to false ).
Set this attribute to true for panle.
When using the Panel component in extjs, you can set autoscroll to true to automatically add a scroll bar. However, sometimes the Panel overflows too much, and the scroll bar is always at the top, which may cause inconvenience to the user. For example, in a webqq-like chat window, the scroll bar is always at the top of each message sending or receiving. for users, you always need to manually move the scroll bar to the bottom to see new messages, obviously uncomfortable.

The following is a solution to move the scroll bar to the bottom of the page if you have spent so much time:

VaR d = targetpanel. Body. Dom;
D. scrolltop = D. scrollheight-D. offsetheight;

This method is based on the Internet. If not, please correct me.

 

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 );
}
}
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:

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.