Question

我在sencha touch2中遇到有关加载更多... 按钮位置的问题。在此处，使用 ListPaging 插件添加“加载更多”按钮，并在其中声明的Ext.plugins.Listpaging文档中添加：

在列表的底部处添加“加载更多”按钮。当用户按下此按钮，下一页数据将被加载到存储并附加到列表。

但是，在这里，带有更多加载按钮的列表项出现在列表的顶部，而不是底部。请在此处查看我的代码：

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
                }
            }

        });

并查看以下结果： enter image description here

任何想法如何在列表底部显示相同的按钮？

由于

编辑：我已经在senchatouch论坛发布了这个问题，仍在等待解决方案，你可以看到它here

Answer 1

有点奇怪。您可以尝试删除这些属性（宽度，高度和可滚动）并将“layout：fit”添加到此列表的父级。

Answer 2

解决了它：

我错过了这个： infinite: true

加载更多按钮现在显示在底部。

感谢@ working Demo的@blessenm： - ）

Answer 3

如果你有任何自定义css尝试禁用它。或者，如果您能够在小提琴中重现相同的问题，那么修复起来会更容易。这是一个工作演示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');
}
});

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

3 个答案: