Question

I have a formpanel that is extended to make a class which is called from another file.
The setup works in that it is displayed correctly.

The issue I am facing is that I keep getting an error “this.getForm is not a function” in Firebug whenever I press the submit button.

The code I have was taken from a tutorial with the exact same setup as me so I do not understand why I keep getting this error.

SearchForm = Ext.extend(Ext.FormPanel, {
     id: 'myForm'
     ,title: 'Search Form'
     ,frame:true    
     ,waitMessage: 'Please wait.'          
     ,initComponent: function() {    
         var config = {                 
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.3,
                    layout: 'form',
                    items: [{
                        xtype:'combo',                              
                        id: 'reportSelecCmb1',                              
                        hiddenName: 'ddi_country',                           
                        anchor:'98%',
                        store: dateStore,
                        displayField: 'name',
                        valueField: 'alpha2code',
                        selectOnFocus: true,
                        mode: 'local',
                        typeAhead: true,
                        editable: false,
                        triggerAction: 'all',
                        value: 'report_date',
                        listeners: {
                            select: {
                                fn:function(combo, value){
                                   myStore.load({params:{ddi_country: this.value}});
                                        }
                                    }  
                                }
                            }, 
                        ...
                }],
                buttons: [{
                    text: 'Submit',
                    id: "submitBtn",                    
                    handler: this.submit
                },{
                    text: 'Reset'
                }] 
            }]};

            // apply config
            Ext.apply(this, config);
            Ext.apply(this.initialConfig, config);

            SearchForm.superclass.initComponent.apply(this, arguments);      

        }

    ,submit : function(url, waitMsg) {
        this.getForm().submit({
            url: url
            ,scope: this
            ,waitMsg: waitMsg
            ,success: this.onSuccess
            //,failure: this.onFailure
        })
    }

    ,onSuccess: function(form, action) {    
        Ext.Msg.show({  
            title: 'Success'    
            ,msg: 'Success!'    
            ,modal: true    
            ,icon: Ext.Msg.INFO 
            ,buttons: Ext.Msg.OK    
        }); 
    }

});

Answer 1

You have a scope problem with your button.

Change your button definition to the following by adding the scope pointing at this:

buttons: [{
    text: 'Submit',
    id: "submitBtn",                    
    handler: this.submit,
    scope: this
},{
    text: 'Reset'
}] 

Hope it helps.