View reference getter undefined

[toddlee]

Hi,
I'm pretty new to Sencha Touch 2 and trying to get used to it.

I'm having a weird issue where I get the following error when I try to use getter for a ref that I defined.

Ext.define('my.controller.Tests', {
    extend: 'Ext.app.Controller',
    views: [
        'test.Create',
        'test.SelectList',
    ],
    config: {
        'refs': {
            selectList: '#selectList',  // I tried selectList (xtype)
            createForm: '#createForm',
        },
        'control': {
            '.user': {
                focus: 'showOverlay'
            }
        },
...
    showOverlay: function() {
        var a = this.getCreateForm();
        a.setCentered(true); // this works.

        overlay = this.getSelectList();
        overlay.setCentered(true); // this doesn't work. overlay is undefined.
        overlay.show();
    }



...

createForm is a formpanel in a panel and selectList is a custom class extending Ext.List.
The only difference I see is that getCreateForm() refers to non-top-level view and getSelectList() refers to a top-level view.

Ext.define('my.view.test.SelectList', {
    extend: 'Ext.Panel',
    alias: 'widget.selectList',
    id: 'selectList',
...
});

Ext.define('my.view.test.Create', {
    extend: 'Ext.Panel',
    alias: 'widget.whatever',
    config: {
        items: [
            {
                title: 'Create User',
                xtype: 'formpanel',
                id: 'createForm',
...
});

I'm really frustrated.
Please let me know what I'm doing wrong.

[mitchellsimoens]

I would do it but the id in the SelectList class needs to be in the config object. I personally would stay away from setting an id especially in Ext.define.