List: ScrollToEnd causes PullRefreshPlugin to show up

**Philippe Quemener** · 14 Feb 2013 7:01 AM

REQUIRED INFORMATION Sencha Touch version tested:

ST 2.1

ST 2.0 didn't have this problem Browser versions tested against:

Chrome 24.0.1312.57
Safari 5.1.7

DOCTYPE tested against:

<!DOCTYPE html>

Description:

I have a list with a PullRefreshPlugin. If you have a small number of entries in
this list, so that there is white space below the entries, a call to scrollToEnd on the
list will cause the PullRefreshPlugin to show up (and stay there)

Steps to reproduce the problem:

Take the code below (it is the example code for the PullRefreshPlugin from the
docs + an invocation of list.scrollToEnd after 5 seconds
Execute it with your browser
at fullScreen
After 5
seconds you will see the PullRefreshPlugin on the screen

The result that was expected:

You should see the PullRefreshPlugin only by user interaction I guess

The result that occurs instead:

You see the PullrefreshPlugin

Test Case:

Code:

 Ext.application(
{
    launch: function()
    {
        
        var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'img', 'text'],
    data: [
        {
            name: 'edpsencer',
            img: 'http://a2.twimg.com/profile_images/1175591906/Ed-presenting-cropped_reasonably_small.jpg',
            text: 'Read about Sencha Touch'
        },{
            name: 'rdougan',
            img: 'http://a0.twimg.com/profile_images/1261180556/171265_10150129602722922_727937921_7778997_8387690_o_reasonably_small.jpg',
            text: 'Javascript development'
        }
    ]
});

var list = Ext.create('Ext.dataview.List', {
    fullscreen: true,

    store: store,

    plugins: [
        {
            xclass: 'Ext.plugin.PullRefresh',
            pullRefreshText: 'Pull down for more new Tweets!'
        }
    ],

    itemTpl: [
        '<img src="{img}" alt="{name} photo" />',
        '<div class="tweet"><b>{name}:</b> {text}</div>'
    ]
});

setTimeout(function()
{
    var scrollable = list.getScrollable();
    if (!isValid(scrollable))
        return;
    
    var scroller = scrollable.getScroller();
    if (!isValid(scroller))
        return;
    
    scroller.refresh();
    scroller.scrollToEnd();
}, 5000);
    }
});

HELPFUL INFORMATION Screenshot or Video:

attached

Debugging already done:

The scrollToEnd seems to fire a kind of scroll event and the plugin react on this in
its onScrollChange method

Possible fix:

I can workaround this by inheriting from PullRefresh so that it doesn't react in
onScrollChange if it was invoked by my app. But this is quite ugly I guess.

Additional CSS used:

only default ext-all.css

Operating System:

________
Windows 7

**mitchellsimoens** · 14 Feb 2013 7:33 AM

Thanks for the report! I have opened a bug in our bug tracker.

**Philippe Quemener** · 18 Feb 2013 11:59 PM

Maybe this is another bug I found and I should open another thread for this. But it seems to me that both are related:

I have a list without PullRefreshPlugin and only a few entries, so the screen is not filled completely. If I invoke scrollToEnd on the list, the list entries are moved to the bottom of the screen. Screenshot is attached.

Test code:

Code:

var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'img', 'text'],
            data: [
                {
                    name: 'rdougan',
                    img: 'http://a0.twimg.com/profile_images/1261180556/171265_10150129602722922_727937921_7778997_8387690_o_reasonably_small.jpg',
                    text: 'JavaScript development'
                }
            ]
        });

        var list = Ext.create('Ext.dataview.List', {
            fullscreen: true,

            store: store,

            itemTpl: [
                '<img src="{img}" alt="{name} photo" />',
                '<div class="tweet"><b>{name}:</b> {text}</div>'
            ]
        });
        
        setTimeout(function()
        {
            var scrollable = list.getScrollable();
            if (!isValid(scrollable))
                return;
            
            var scroller = scrollable.getScroller();
            if (!isValid(scroller))
                return;
            
            scroller.refresh();
            scroller.scrollToEnd();
        }, 5000);

List: ScrollToEnd causes PullRefreshPlugin to show up

Thread Tools

Search Thread

Display

List: ScrollToEnd causes PullRefreshPlugin to show up

List: ScrollToEnd causes PullRefreshPlugin to show up