Sencha Touch数据视图与分页插件

Så我注意到Sencha Touch中一个非常恼人的错误。当我尝试将分页插件添加到我的数据视图时，“加载更多”文本放置在项目上方，而不是像我想要的那样。它与标准的listview一起工作。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' 
}

而且这里有一个例子煎茶小提琴码 - 框架的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()

我与Ext.dataview.dataview的煎茶触摸文档中检查，这在添加分页插件时显示类似的行为，所以我知道这可能不是我自己的错。我真的很想将loadinText放置在数据视图的底部。任何建议将非常感谢！

来源

2015-01-06 Mkni1408

是您的分页做工精细用数据视图？ –

是它的工作原理，它是“loadmore” -text刚放置那就是问题所在。 – Mkni1408

-1

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

来源

2015-01-12 13:21:37 Mkni1408

请把你的CSS代码放在底部。 –

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

在sencha论坛solutions中，您可以看到他们已将xtype从dataview更改为list。我也有同样的问题，我也这样做。但是如果你想要dataview而不是list的外观和感觉，你可以做一些补充。

disableSelection: true, 
pressedCls: '',

我希望这可以帮助你。需要帮助请叫我。

来源

2015-01-07 12:57:59

嘿阿南德，谢谢，但那不是我真正想要的。这让我很烦恼，dataview支持插件，但缺少一些基本功能，比如在哪里放置“加载更多”按钮。我设法通过手动移动按钮来解决它。 – Mkni1408

列表分页插件是为列表开发的。如果您将它用于DataView，那么加载更多文本将出现在顶部。我面临同样的问题。我已经通过列表分页插件Js。然后通过改变Css属性来获得解决方案。

检查“loading-spinner”CLass并将样式更改为：style =“font-size：180％; margin：10px auto; position：absolute; bottom ：0px; left：50％并检查类 - “list-paging-msg”并将样式更改为style =“position：absolute; bottom：0px;左：50％;”

来源

2015-01-19 09:20:24

我已经找到了解决方案，通过列表分页插件，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 
 
     }]); 
 
    } 
 
}

来源

2017-11-15 06:02:38 user2861067

Sencha Touch数据视图与分页插件

回答

相关问题