-1

我遇到了关于Load More...按钮在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
                }
            }

        });

并查看以下结果： 在此处输入图像描述

知道如何在列表底部显示相同的按钮吗？

谢谢

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

4

3 回答 3

2

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

于 2013-05-28T13:05:10.970 回答
1

解决了它：

我错过了这个： infinite: true

加载更多按钮现在出现在底部。

感谢@blessenm 的工作演示:-)

于 2013-06-03T07:17:15.227 回答
1

如果您有任何自定义 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');
}
});
于 2013-06-03T07:38:38.263 回答