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
]
});
}
})
Try removing fullscreen: true from your hotelList