Problem with IndexBar in combination with select field

[_stefan_]

Hi there,

I have problems to get the indexBar working in combination with a select field.
I want to realize a select field with a list of all countries. To improve the usability of scrolling, I tried to combine it with a indexBar list in a new component. The component itself is displayed well, but the fast "index scrolling" doesn't work and I can't figure out why.

Ext.define('My.component.form.IndexSelect', {
   extend : 'Ext.field.Select',

   xtype : 'my_indexselect',

   requires :
   [
      'Ext.List'
   ],

   usePicker : false,
   
   listPanel : undefined,

   getTabletPicker : function()
   {
      var that = this;
      var displayField = this.getDisplayField();
      var storeOfSelect = this.getStore();
      storeOfSelect.setSorters(displayField);
      storeOfSelect.setGrouper({
         groupFn: function (record){
            return record.get(displayField)[0];
         }
      });
      var config = this.getDefaultTabletPickerConfig();
      this.listPanel = Ext.create('Ext.Panel', Ext.apply({
         centered : true,
         modal : true,
         hideOnMaskTap : true,
         cls: Ext.baseCSSPrefix + 'select-overlay',
         layout: 'fit',
         items :
         [
            {
               xtype : 'list',
               itemTpl : '{' + displayField + '}',
               store : storeOfSelect,
               grouped: true,
               indexBar: true,
               listeners : {
                  select : {fn: that.onListSelect, scope: that}
               }
            }
         ]
      }, config));
      return this.listPanel;
   },
   
   onListSelect : function(item, record)
   {
      this.setValue(record.getData()[this.getValueField()]);
      this.listPanel.down('list').hide();
      this.listPanel.hide({
         type: 'fade',
         out: true,
         scope: this
      });
      return this;
   },

   showPicker : function()
   {
      var listPanel = this.getTabletPicker();

      if (!listPanel.getParent())
      {
         Ext.Viewport.add(listPanel);
      }
      listPanel.showBy(this.getComponent());
      listPanel.down('list').show();
   }
});

The code is inspired this post: http://www.sencha.com/forum/showthread.php?181809-New-quot-Multi-select-field-quot-extension-for-ST2-(RC)

[_stefan_]

Sorry for pushing, but I have still the problem that this kind of list doesn't scroll and I don't think that the solution is very far away from my posted component. I just don't see it.