How to configure the Ext.List launched from a selectfield in Sencha Touch?

Question

In Sencha Touch 2, I have a formpanel with a selectfield to pick from a large store of models. I can choose between an Ext.Picker or an Ext.List as the picker component by setting the usePicker property on the selectfield. But how do I configure the Ext.List?

I tried setting defaultPhonePickerConfig and defaultTabletPickerConfig, but that doesn't seem to work. Specifically, I want to set { grouped: true, indexBar: true } to help my users navigate the long list of options. I used the JavaScript debugger to trace the showPicker() method and verified that the instantiated Ext.List has those two properties set in its config property. But the list overlay still doesn't show the group headings or the index bar. Any idea what I could be doing wrong?

Answer 1

The solution is to defer configuration until after the panel component is painted:

usePicker: false,
defaultTabletPickerConfig: {
    listeners: {
        painted: function(panel) {
            var list = panel.down('list');
            list.setGrouped(true);
            list.setIndexBar(true);
        }
    }
}

This is dumb.