getter returning undefined

Question

i am using sencha touch 2 to build an app.

i Have the following view:

Ext.define("DRT.view.Pbox", {
    extend: 'Ext.form.Panel',
    xtype: 'pboxcard',
    config: {
        floating: true,
        centered: true,
        modal: true,
        height: 200,
        wifth: 300,
        styleHtmlContent: true,
        html: 'Hi this is a popup',
        items: [
            {
                xtype: 'button',
                action: 'hide',
                ui: 'confirm',
                docked: 'bottom'
            }
        ]
    }
});

in my controller i have the follow ref:

    config: {
        refs: {
            home: 'homecard',
            pbox: 'pboxcard',
        }
   }

and i have one the following function:

showError: function(){
            var popup = this.getPbox();
        console.log(popup);
        Ext.Viewport.add(popup);  
        popup.show();
     }

but for some reason popup is undefined. and i cant seem to find out what the problem is

Answer 1

sorry guys i figured it out ... posted it a little too soon i guess. had to do this instead

    pbox: {
        selector: 'formpanel pboxcard',
        xtype: 'pboxcard',
        autoCreate: true
    },