Overlaying in list items with Sencha Touch app

Question

I am developing a Sencha Touch app with lists, specifically in one list we have (for example) 400 different items and it is necessary to include the parameter infinite: true to improve the performance in the view..

But I am looking a strange behavior and the items are overlaying with the next one..

My code is:

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

This behavior is happening when I include the infinite parameter..

Component cls has not css rules, here you can view the extended component:

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

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

Any clue??

Thank you in advance.

Answer 1

When you use infinite: true , you can use the itemHeight property to set the height (in pixels) of each list item.

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

Answer 2

You might want to use the flag variableHeights:true.

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

Other than that your mweb-list might be setup for normal lists, but not following the structure of infinite lists. If variableHeights does not help please post your css code.

css:

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