Search code examples
javascriptsencha-touch

Overlaying in list items with Sencha Touch app

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..

enter image description here

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.

Solution

  • 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
}