Scroll event on ExtJS Grid Panel?

0
votes

I have a grid panel in ExtJS with scroll bars. I am trying to detect when the user has scrolled all the way down(so that they can not move bar anymore). So far I have this, which detects when scroll occurs but provides no information(?) about where the scroll bar is.

//bufferedGrid is a grid panel
this.randomGrid.getView().on('scroll', this.onRandomGridScroll, this);
.
.
.
onRandomGridScroll : function(e, t)
{
    console.log(e);
    console.log(t);

}

Any pointers would be appreciated.

2
javascriptextjsscrolldom-events
You will need to override onViewScroll() of Ext.grid.plugin.BufferedRenderer class for buffered grid. - Tejas
@Tejas1991 "bufferedGrid" is just a name...it's not referring to the plugin - Pepria
You are using buffered grid (pagination grid) ? So you will need to override same method which i am saying or need to bind scroll event for this grid ....which option you are ok ? - Tejas
@Tejas1991 This is just a grid...I changed the name in the question... - Pepria

2 Answers

0
votes

You can access the current scroll bar position(actually, the top of the scroll bar) and the maximum scroll position as follows(works in Firefox but not Chrome):

onBufferedGridScroll : function(e, t)
    {
        var max = this.bufferedGrid.getView().el.dom.scrollTopMax;
        var current = this.bufferedGrid.getView().el.dom.scrollTop;
        if( current == max )
            alert('You have reached the bottom of the scroll !');
    }
0
votes

Add event on init After grid is rendered add a mouseup event and a wheel down event.

'container #gridId':{ afterrender: this.addScrollEventListener }

addScrollEventListener: function(comp){
    comp.getTargetEl().on('mouseup', function(e, t) {
        var height = comp.getTargetEl().getHeight();
        if (height + t.scrollTop >= t.scrollHeight) {

        }
    });
    comp.getTargetEl().on('wheeldown', function(e, t) {
        var height = comp.getTargetEl().getHeight();
        if (height + t.scrollTop >= t.scrollHeight) {

        }
    });
}