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:

Code:
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.