Search code examples
javascriptextjssencha-touchsencha-touch-2dom-events

Scroller events don't fire in Sencha Touch


I configured scroll events in a dataview but they don't fire. The rest of scrollable configuration is OK, just the listeners conf doesn't seem to be considered. Any clue ?

{   itemId:'names',
    xtype:'dataview',
    disableSelection:true,
    scrollable:{
        direction:'vertical',
        listeners:{
            scroll:function(){
                console.log('[scrollable][on scroll]');
            },
            scrollend:function( scroller, x, y, eOpts ){
                console.log('[scrollable][on scrollend]x='+x+', y='+y);
            }
        }
    },
    store:{
            fields:['name'],
            data:[{name:'Cherif'}]
    },

    itemTpl:'{name}'
}

Solution

  • Edit: Actually tried suggested fix out this time

    You need to put the listeners config inside a scroller as demonstrated in this jsFiddle:

    {
        xtype:'dataview',
        fullscreen: true,
        scrollable: {
            direction:'vertical',
            scroller: {
                listeners:{
                    scroll:function(){
                        console.log('[scrollable][on scroll]');
                    },
                    scrollend:function( scroller, x, y, eOpts ){
                        console.log('[scrollable][on scrollend]x='+x+', y='+y);
                    }
                }
            }
        },
        store: {
            fields: ['name', 'age'],
            data: [
                {name: 'Jamie',  age: 100},
                {name: 'Rob',   age: 21},
                {name: 'Tommy', age: 24},
                {name: 'Jacky', age: 24},
                {name: 'Ed',   age: 26}
            ]
        },
    
        itemTpl: '<div>{name} is {age} years old</div>'
    }