带分页插件的 Sencha Touch 数据视图

Question

我注意到 Sencha Touch 中有一个非常烦人的错误。当我尝试将分页插件添加到我的数据视图时，"load more" 文本位于项目上方，而不是像我希望的那样位于下方。它适用于标准列表视图。

我发现另一个线程要求我将 "inifinte:true" 添加到我的数据视图，但这没有帮助。 "bottom:0" 或 "docked:'bottom'" 选项也没有。这是我的代码：

{
  xtype: 'dataview',
  plugins: {
     type: 'listpaging',
     loadMoreText: 'Indlæs flere..',
     autoPaging: true
  },
  flex: 1,
  cls: 'inspectionImages',
  itemId: 'imageContainer',
  padding: 10,
  style: 'background: #F7F7F7; color: black',
  emptyText: 'Der er ingen billeder på synet.',
  itemTpl: ['...'],
  loadingText: 'Henter billeder..',
  store: 'Images'
}

这里还有一个煎茶示例 fiddle 代码 - 框架是 2.4.x:

Ext.application({
launch: function () {
    var touchTeam = Ext.create('Ext.DataView', {
        fullscreen: true,
        plugins: {
            type: 'listpaging',
            loadMoreText: 'Indlæs flere..',
            autoPaging: true
        },
        store: {
            fields: ['name', 'age'],
            data: [{
                name: 'Jamie',
                age: 100
            }, {
                name: 'Rob',
                age: 21
            }, {
                name: 'Tommy',
                age: 24
            }, {
                name: 'Jacky',
                age: 24
            }, {
                name: 'Ed',
                age: 26
            }]
        },
        itemTpl: '<div>{name} is {age} years old</div>'
    });

    touchTeam.getStore().add({
        name: 'Abe Elias',
        age: 33
    });

    touchTeam.getStore().getAt(0).set('age', 42);
  } // launch
}); // application()

我已经检查了 sencha touch 文档中的 Ext.dataview.dataview，这在添加分页插件时显示了类似的行为，所以我知道这可能不是我自己的错。我真的很想将 loadinText 放在数据视图的底部。任何建议将不胜感激！

Answer 1

这是 Sencha Touch 中的错误。 Mitchell Simoens 告诉 here 它仅适用于 List，但我相信这也应该支持 dataview，因为它比 list 轻。

在 sencha 论坛 solutions 中，您可以看到他们已将 xtype 从 dataview 更改为 list。我也有同样的问题，我也做了同样的事情。但是如果你想要 dataview 而不是 list.

的外观和感觉，你可以做一些添加

disableSelection: true,
pressedCls: '',

希望对您有所帮助。如果您还需要什么，请告诉我。

Answer 2

事实证明，pagingplugin 不适用于 Dataview。不过还是可以用的。最后，我只是在每次插件加载结束时手动移动 DOM 中的 "load more" 文本。为了确保没有听众丢失，我使用了 appendchild JS 函数并应用了一些自定义 css。现在一切都按预期工作。

Answer 3

列表分页插件专为列表开发。如果您将它用于 DataView，则加载更多文本将出现在顶部。我遇到过相同的 Problem.I 经历了列表分页插件 Js。然后通过更改 Css 属性..

得到解决方案

检查 "loading-spinner" CLass 并将样式更改为：style="font-size: 180%; margin: 10px auto;position:absolute; bottom: 0px; left: 50% 并检查 Class -"list-paging-msg" 并将样式更改为 style="position:absolute; bottom: 0px; left: 50%;"

Answer 4

通过List paging Plugin Ext.dataview.DataView和Ext.dataview.List的代码，我找到了解决方案。

dataview初始化后初始化列表分页插件，那么"load more component"位置就对了

Ext.define('MyDataView', {
    extend: 'Ext.dataview.DataView',
    
    config: {
        /* do not set here
        plugins: [{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }, {
            xclass: 'Ext.plugin.PullRefresh'
        }]
        */
    },

    initialize: function() {
        var me = this;

        me.callParent();

        // Initialize plugin here, so the listpaging component will append after dataview container
        me.setPlugins([{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }, {
            xclass: 'Ext.plugin.PullRefresh'
        }]);
    }
}

带分页插件的 Sencha Touch 数据视图

Sencha Touch dataview with paging plugin

extjs

sencha-touch