Can't get textfield values from a form panel inside an overlay

Question

Hi, I'm trying to put a fieldset in an overlay when a button is pressed. However, when I try to retrieve the values as follows

"var values = Ext.getCmp('reviewscontainer').getValues();" 

I get an error: "Uncaught TypeError: Cannot call method 'getValues' of undefined". How do I reference these values to retrieve them from inside the overlay? It does work if it's not in an overlay.

Ext.define('FirstApp.view.ReviewsContainer',{
extend:'Ext.NavigationView',
xtype:'reviewscontainer',
config:{

    title:'Reviews',
    iconCls:'compose',
    items:[
        {
            xtype:'reviews'

        },
        {
          xtype: 'button',
                    align: 'right',
                    ui: 'confirm',
                    text:'Leave Review',
            docked: 'bottom',
            centered: 'true',


              handler: function() {
                if (!this.overlay) {
                    this.overlay = Ext.Viewport.add({
                        xtype: 'formpanel',    
                        modal: true,
                        hideOnMaskTap: true,
                        showAnimation: {
                            type: 'popIn',
                            duration: 250,
                            easing: 'ease-out'
                        },
                        hideAnimation: {
                            type: 'popOut',
                            duration: 250,
                            easing: 'ease-out'
                        },
                        centered: true,
                        width: Ext.os.deviceType == 'Phone' ? 260 : 400,
                        height: Ext.os.deviceType == 'Phone' ? 220 : 400,
                        styleHtmlContent: true,

                        items: [
                            {
                                docked: 'top',
                                xtype: 'toolbar',
                                title: 'Overlay Title'
                            },

            {
                xtype:'fieldset',
                title: 'Reviews',
             items: [
                    {
                        xtype:'textfield',
                        name: 'name',
                        label:'Name',
                        placeHolder: 'name'
                    },
                    {
                        xtype:'textfield',
                        name:'business',
                        label:'Place'
                    },
                      {
                        xtype:'textfield',
                        name:'rating',
                        label:'Rating'
                    },
                    {
                        xtype:'textareafield',
                        name:'review',
                        label:'Review'
                    }
                ]
            },
            {
            items:[
                {
                    xtype:'button',
                    text: 'Submit',
                    ui:'confirm',
                    handler: function(){
                      var values = Ext.getCmp('reviewscontainer').getValues();
                      // prints the values filled in the form 
                      // text fields of name, email and message.     
                      console.log(values.name+","+values.place+","+values.rating);                          


                      Ext.Ajax.request({
                        url: 'http://insert.php',
                        params : values,
                        success: function(response){
                            var text = response.responseText;
                             Ext.getCmp('reviewscontainer').reset();
                            Ext.Msg.alert('Success', "Review successfully created.",    this.overlay.hide()); 
                        }
                       });
                    }
                }
            ]
        }
                        ],
                        scrollable: false
                    });
                }

                this.overlay.show();
            }
        }

    ]
}
})

Answer 1

It's because you do not specify any id for your form panel:

Ext.getCmp('reviewscontainer')

Used for retrieving item with id: reviewscontainer not xtype:'reviewscontainer'.

So you just need to add id: reviewscontainer to your form panel and it should work.