Question

Problem

My Problem is that Scrolling on a group list does not work on a mobile device, it works fine on a desktop.

On all devices you can’t view last part of the list, it just keeps bouncing back.

So here’s the code.

Ext.regModel('HotelModel', {
    fields: ['name', 'narrative']
});
var hotelStore = new Ext.data.Store({
    model: 'HotelModel',
    getGroupString : function(record) {
        return record.get('name')[0];
    },
    sorters:'name',
    autoLoad: false
});
BBTM.views.hotelList = new Ext.List({
    id: 'hotelList',
    fullscreen: true,
    itemTpl: '<div class="list-item-title">{name}</div>' + '<div class="list-item-narrative">{narrative}</div>',
    grouped : true,
    allowDeselect: true,
    clearSelectionOnDeactivate: true,
    xtype: 'list',
    indexBar: true,
    store: hotelStore,
    singleSelect: true,
    // layout: 'card',
    flex: 1
});
BBTM.views.hotelListContainer = new Ext.Panel({
    id: 'hotelListContainer',
    layout: 'card',
    fullscreen: true,
    dockedItems: [BBTM.views.hotelToolbar,BBTM.views.hotelList]
});
BBTM.views.hotelsListView = new Ext.Panel({
    id: 'hotelsListView',
    layout: 'card',
    fullscreen: true,
    items: [BBTM.views.hotelListContainer]
});
var App = new Ext.Application({
name : 'BBTM',
useLoadMask : true,
launch : function () {
    BBTM.views.viewport = new Ext.Panel({
        fullscreen: true,
        layout: 'card',
        cardAnimation: 'slide',
        items: [
            BBTM.views.hotelsListView
        ]
    });
}
})

Answer 1

Try removing fullscreen: true from your hotelList