Overlay List Items Using Sencha Touch

Question

I am developing a Sencha Touch application with lists, in particular in one list we have (for example) 400 different elements, and we need to add a parameter infinite: trueto improve performance in the view.

But I am looking at strange behavior, and the elements are superimposed on the next.

My code is:

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

This behavior happens when I turn on the parameter infinite..

The cls component does not have 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 hint

Thanks in advance.

Answer 1

You might want to use the variableHeights: true flag.

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

, mweb , . variableHeights , css.

CSS

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

Answer 2

infinite: true, itemHeight ( ) .

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