CODEWITHSUNDEEP
extjsextjs4
Romeo Mihalcea
Romeo Mihalcea

Reputation: 10252

extjs4 catching the scroll event on panel

I have a tabpanel with chats on different tabs. Each tab panel has a chat and the discussions are sometime very long so, in my initComponent, I have a code to continuously scroll to bottom so I can show the latest messages:

setInterval ->
    this.scrollBy 100000, 100000
, 100

which works fine for what it's supposed to do. The problem is that I sometimes want to see what I talked earlier and I have to scroll to top but this code obviously wouldn't let me. I implemented a hook:

setInterval ->
    if not this.autoscroll_disabled
        this.scrollBy 100000, 100000
, 100

and now I just have to catch the event when the user triggers a scroll on my panel so I can set autoscroll_disabled to true until he scrolls back to bottom again probably. Any idea how do I catch a scroll event on a panel in extjs?

Upvotes: 3

Views: 5328

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Ext.require('*');

Ext.onReady(function () {
    var content = [],
        i = 1;

    for (; i <=100; ++i) {
        content.push('Line ' + i);
    }

    var p = new Ext.panel.Panel({
        renderTo: document.body,
        width: 200,
        height: 200,
        autoScroll: true,
        title: 'Foo',
        html: content.join('<br />')
    });

    p.getTargetEl().on('scroll', function(e, t) {
        var height = p.getTargetEl().getHeight();
        if (height + t.scrollTop >= t.scrollHeight) {
            console.log('bottom');
        }
    });
});

Upvotes: 4

Related Questions