View Full Version : Scroll problems in a simple list

18 Apr 2011, 7:46 AM

This is my first Sencha touch app and I think I have some beginner problems.

I need a tabpanel main menu (Info, Favoriten, Download) with different contents.
In the Info-panel I want to show a list with a detailed page. I solved the change between the list and the detailed page with a panel.
Now the list scroll doesn't work proberly (because of the panel?) and the index bar isn't show...

Thanks for your help!

var rootPanel;

Ext.ns('demo', 'demo.Data');

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}

demo.contactList = new Ext.List({
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,
store: store,
listeners: {
itemtap: function(list, index, item){
rec = list.store.getAt(index);
detailData = demo.menuList.getComponent('contactDetail');
detailData.update('Here is the content for the detail page');
animation = {type: 'slide', direction: 'left'};
demo.menuList.layout.setActiveItem('contactDetail', animation);

demo.menuList = new Ext.Panel({
fullscreen: true,
layout: 'card',
title: 'Info',
iconCls: 'info',
items: [{
id: 'contactList',
items: [demo.contactList]
id: 'contactDetail',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'light',
title: 'Home',
items: [{
ui: 'back',
text: 'back',
handler: function(){
animation = {type: 'slide', direction: 'right'};
demo.menuList.layout.setActiveItem('contactList', animation);

onReady: function() {

var menuFavorites = {
title: 'Favoriten',
iconCls: 'favorites',
html: '<h1>Titel Favoriten</h1><p>Text Favoriten</p>'

var menuDownload = {
title: 'Download',
iconCls: 'download',
html: '<h1>Titel Download</h1><p>Text Download</p>'

var mainMenu = new Ext.TabPanel({
fullscreen: true,
tabBar : {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
animation: {
type: 'cardslide',
cover: true
items: [demo.menuList,menuFavorites,menuDownload]

rootPanel = new Ext.Panel({
fullscreen: true,
dockedItems: [mainMenu]