Rendering issue with Ext.plugin.PullRefresh

[sivajan.kumaran]

Hi guys,

I am having problems where the pull down to refresh plugin appears above the list. I have a Ext.Container with a Ext.List within it and it always seems to render the plugin above the list not within it.

My code is as follows:

Ext.define("MyApp.view.Feeds", {
    id: 'feedsContainer',
    xtype: 'feeds',
    extend: "Ext.Container",
    alias: "widget.feedscontainer",
    config: {
        layout : 'fit'
    },
    initialize: function () {


        // Initialise parent.
        this.callParent(arguments);


        var feedsPanel = Ext.create('Ext.List', {
            id: 'feedsPanel',
            store: 'FeedsStore',
            ui: 'round',
            emptyText: 'No feeds found',
            plugins: [
                { xclass: 'Ext.plugin.ListPaging' },
                { xclass: 'Ext.plugin.PullRefresh' }
            ],
            itemTpl: Ext.create('Ext.XTemplate',
                '<img src="{ImageUrl}" />',
                '<div class="tweet">',
                    '<span class="posted">jana</span>',
                    '<h2>{Parent}</h2>',
                    '<p>{Description}</p>',
                '</div>',
                {
                    //posted: timeAgoInWords
                }
            ),


            listeners:{
                itemtap: function(view, index, item, e) {
                    var rec = view.getStore().getAt(index);
                    detailPanel.setData(rec.data.Link, 'mainContainer');
                    Ext.Viewport.setActiveItem('detailPanel');
                }
            }


        });


        var detailPanel = new Rolio.view.Content({
            id: 'detailPanel'
        });




        var feedsScreen = new Ext.Panel ({
            id: 'feedsScreen',
            fullscreen: true,
            layout: 'card',
            cardSwitchAnimation: 'slide',
            items: [feedsPanel, detailPanel]
        });


        this.add([feedsScreen]);


    }




});

Any help would be much appreciated.

Thanks
Jana

[mitchellsimoens]

The pullrefresh is within the list but outside the list data rows

[sivajan.kumaran]

Hi Mitchell,

Thanks for your prompt reply. Whenever I have seen the pull down to refresh plugin working, it normall appears when you scroll down on the top element, whereby it appears at the top. It is normally not visible until you scroll down. On my screen shot below, the 'Pull down to refresh' is always visible. I want th behaviour similar to twitter and facebook where it is activated on touch scroll down at top of list. Is that possible?

pulldown.jpg

Thanks
Jana

[mitchellsimoens]

Are you using SASS? If so then you need to @include the pullrefresh sass

[sivajan.kumaran]

Hi Mitchell,

Solved. That worked!!!

Thanks
Jana