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]