使用Sencha Touch应用程序覆盖列表项

Question

我正在开发一个带有列表的Sencha Touch应用程序，特别是在一个列表中，我们有（例如）400个不同的项目，并且必须包含参数infinite: true以提高视图中的性能..

但我看起来很奇怪，而且这些物品与下一个物品重叠......

我的代码是：

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,

当我包含infinite参数..

时会发生此行为

组件cls没有css规则，在这里你可以查看扩展组件：

Ext.define('xx.components.list.BaseListComponent', {
  extend: 'Ext.dataview.List',
  xtype : 'mwebBaseListComponent',

  config: {
    cls          : 'mweb-list',
    useComponents: true,
    emptyText    : '',
    loadingText  : '',
    useHeaders   : false
  }
});

任何线索??

提前谢谢。

Answer 1

使用infinite: true时，可以使用itemHeight属性设置每个列表项的高度（以像素为单位）。

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,
itemHeight : 80

Answer 2

您可能希望使用标志variableHeights：true。

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,
variableHeights: true,

除此之外，您的mweb-list可能是为普通列表设置的，但不遵循无限列表的结构。 如果variableHeights没有帮助，请发布您的css代码。

的CSS：

.mweb-list {
    --> post whatever is in here
}