sencha touch ListPaging插件“加载更多”按钮位置问题

Question

I'm facing an issue regarding the position of the Load More... button in sencha touch2 . Here, the Load More button is added using ListPaging plugin and from the Ext.plugins.Listpaging docs it states:

Adds a Load More button at the bottom of the list. When the user presses this button, the next page of data will be loaded into the store and appended to the List.

But, here, the list item with load more button appears at the top of the list, not to the bottom. See my code here:

Ext.define('MyApp.view.MyLIst', {
            extend : 'Ext.dataview.List',
            xtype : 'mylist',
            id : 'myList' ,
            requires : [Ext.data.Store','Ext.plugin.ListPaging'],

            config : {
                width : '100%',
                height : '100%',
                loadingText : 'Loading data...',
                emptyText : 'No Members',
                itemTpl : '<div class="mylisttitle">{title}</div>',
                store : 'mylistStore',
                plugins : [
                        {
                        xclass : 'Ext.plugin.ListPaging',
                        autoPaging : false,
                        loadNextPage: function() {
                                console.log('Load more button clicked');
                            // fire event here
                            }
                        }],
                masked : false,
                mode : 'SINGLE',
                scrollable : {
                    direction : 'vertical',
                    directionLock : true
                }
            }

        });

and see the result below:

Any idea how could I show the same button at the bottom of the list?

Thanks

EDIT : I had posted the issue in senchatouch forum to, still awaiting a solution, you can see it here

Answer 1

Kind of strange. Can you try removing these properties (width, height and scrollable) and adding "layout:fit" to the parent of this list.

Answer 2

Solved it:

I was missing this : infinite: true

Load more button now appears at the bottom .

Thanks @blessenm for the working Demo :-)

Answer 3

If you have any custom css try disabling it. Or if you are able to reproduce the same issue in a fiddle it would be more easier to fix. Here is a work demo jsfiddle.net/blessenm/9ypwk

Ext.application({
    launch: function () {
        Ext.define('TweetStore', {
            extend: 'Ext.data.Store',

            config: {


         fields: ['from_user', 'profile_image_url', 'text', 'created_at'],

            pageSize: 25,
            autoLoad: true,

            proxy: {
                type: 'jsonp',
                url: 'http://search.twitter.com/search.json',

                pageParam: 'page',
                limitParam: 'rpp',

                extraParams: {
                    q: 'sencha'
                },

                reader: {
                    type: 'json',
                    rootProperty: 'results'
                }
            }
        }
    });

    Ext.define('MyApp.list.List', {
        extend: 'Ext.List',

        config: {
            useSimpleItems: false,
            variableHeights: true,
            infinite: true,
            disableSelection: true,
            allowDeselect: false,
            store: Ext.create('TweetStore'),
            loadingText: 'Loading data...',
            emptyText: 'No Members',

            plugins: [{
                xclass: 'Ext.plugin.ListPaging',
                autoPaging: false
            }],

            itemTpl: Ext.create('Ext.XTemplate',
                '<div>{text}</div>'),
            masked: false,
            mode: 'SINGLE',
            scrollable: {
                direction: 'vertical',
                directionLock: true
            }
        }
    });

    Ext.define('MyApp.list.Container', {
        extend: 'Ext.Container',
        config: {
            fullscreen: true,
            layout: 'vbox',
            items: [{
                xtype: 'titlebar',
                title: 'Load More Plugin',
            }, {
                xclass: 'MyApp.list.List',
                flex: 1
            }]
        }
    });
    Ext.create('MyApp.list.Container');
}
});