带有分页插件的煎茶触摸数据视图

Question

Så 我注意到Sencha Touch中有一个非常烦人的错误。当我尝试将分页插件添加到我的数据视图时，"加载更多"文本放置在项目上方，而不是像我想要的那样放在下方。它适用于标准列表视图。

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

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

这里还有一个示例 sencha 小提琴代码 - 框架是 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 触摸文档中的 Ext.dataview.dataview，这在添加分页插件时显示了类似的行为，所以我知道这可能不是我自己的错。我真的希望将加载文本放在数据视图的底部。任何建议将不胜感激！

Answer 1

列表分页插件是为列表开发的。如果您将其用于数据视图，则"加载更多文本"将显示在顶部。我遇到了同样的问题，我已经浏览了列表分页插件 js。然后通过更改css属性获得解决方案。

检查"加载微调器"CLass并将样式更改为：style="字体大小：180%;边距：10px auto;位置：绝对;底部：0px;左：50%并检查类 -"列表分页-msg" 并将样式更改为 style="位置：绝对;底部：0px;左： 50%;"

Answer 2

这是Sencha Touch中的一个错误。米切尔·西蒙斯（Mitchell Simoens）在这里告诉过，它仅适用于List，但我相信这也应该支持dataview，因为与list相比，它很轻。

在 sencha 论坛解决方案中，您可以看到他们将 xtype 从 dataview 更改为 list 。我也有同样的问题，我也做了同样的事情。但是，如果您想要dataview的外观和感觉，您可以做一些添加，而不是list。

disableSelection: true,
pressedCls: '',

我希望这对你有所帮助。如果您需要其他任何东西，请告诉我。

Answer 3

我在浏览了列表分页插件，Ext.dataview.DataView和Ext.dataview.List的代码后找到了解决方案。

初始化

列表分页插件 数据视图初始化后，则"加载更多组件"位置将是正确的。

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'
        }]);
    }
}

Answer 4

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