List not scrolling

[Prozaxx]

Hello,
I am trying to use an indexBar on a grouped list that is an item in a Panel. The problem is that when i set indexBar: true , the list will not scroll anymore, at all. I can only click on the letters to move it. Also, the indexBar is set in the middle of the panel, rather than on the right, and it's just a normal font. It doesn't look like the one from the docs page.
This is my panel which contains my list:

Ext.define('App.view.Companies',{
    extend: 'Ext.Panel',
    requires: [
        'Ext.dataview.List'
    ],
    xtype: 'companies',
    config: {
        title: 'Companies',
        itemId: 'companies',
        layout: 'fit',
        styleHtmlContent: true,
        styleHtmlCls:'document-entry',
        items: [
            {
                xtype: 'list',
                fullscreen: true,
                store: 'Companies',
                grouped: true,
                indexBar:  true,
                itemTpl: '<div class="Company"></div> <h1>{name} {symbol}</h1></div>'
            }
        ]
    }
});

Please advise what to do to in order to make it act similar to the one from the docs. I think I need to add some css to it to make it look similar, but this seems odd to make as I haven't changed the css for x-indexBar at all.
Thank you.

[sword-it]

Hi Prozaxx,

Give "fullscreen" config to the panel instead of list, like-

Ext.create('Ext.Panel', {
   fullscreen: true,
    layout:'fit',
    items:[    
        {
            xtype:'list',
            indexBar:true,
           itemTpl: 'Your Tpl',
           store: store,
           grouped: true
        }]
});

[Prozaxx]

Thank you for answering. I have tried that, but it did not help. The list is shown in the same way. I think I should also mention that my panel is part of a navigation view. This is how it is defined :

Ext.define('App.view.CompaniesContainer',{    extend: 'Ext.navigation.View',
    xtype: 'companiesContainer',
    config: {
        layout: 'card',
        navigationBar:{
            items: [
                {
                    xtype: 'button',
                    text: 'Menu',
                    align: 'left',
                    action: 'openMenu'
                }
            ]
        },
        items: [
            {
                xtype: 'companies'
            }
        ]
    }
});