Unable to get form(xtype: form) reference in extjs3

Question

I'm using extjs3.4 version, Here im unable to get the direct form reference in controller.

task.MgmtContainerUi = Ext.extend(Ext.Panel, {
    title: 'My Panel'
    ,width: 834
    ,height: 443
    ,layout: 'fit'
    ,header: false
    ,initComponent: function() {
        this.items = [
                      {
                          xtype: 'grid'
                          ....
              ....
                      }
                      ,{
                          xtype: 'grid'
                          .....
              .....
                      }
                      ,{
                          xype:'form'           
                          ,fileUpload: true
                          ,width: 498
                          ,height: 350
                          ,frame: true
                          ,title: 'Upload a File'
                          ,autoHeight: true
                          ,id:'uploaderFileForm'
                          ,ref: 'uploaderFileForm'
                          ,bodyStyle: 'padding: 10px 10px 10px 10px;'
                          ,labelWidth: 50
                          ,defaults: {
                              anchor: '95%'
                              ,allowBlank: false
                              ,msgTarget: 'side'
                          }
                          ,items: [{
                              xtype: 'fileuploadfield'
                              ,id: 'DictUploadField'
                              ,width: 350
                              ,emptyText: 'Select an file'
                              ,fieldLabel: 'Photo'
                              ,labelWidth: 450
                              ,name: 'file-path'
                              ,buttonText: 'Browse ...'
                          }]
                          ,buttons: [{
                              text: 'Upload'
                              ,id:'uploadFileButton'
                            }
                            ,{
                              text: 'Reset'
                              ,id:'resetUploadFileButton'
                            }
                            ,{
                               text:'Cancel'
                               ,id:'cancelUploadFileButton'

                            }]          
                      }
                      ];
             task.MgmtContainerUi.superclass.initComponent.call(this);
        }
});

In the controller, i wrote event for upload button as shown below

var uploadFileButton = Ext.getCmp('uploadFileButton');
uploadFileButton.on('click', this.onUploadFileButton, this);

then i try to get the reference of form as below in the controller

,onUploadFileButton: function(me, e){
    var formRef = Ext.getCmp('uploaderFileForm');    
    formRef.getForm();
    }

i got the error as formRef.getForm() not a method. When i debug with firebug, i found that formRef is pointing to parent component as panel but still the xtype is form only. Here im unable to call getForm method.

Ext.util.Observable
  Ext.Component
    Ext.BoxComponent
      Ext.Container
        Ext.Panel
           Ext.form.FormPanel

Reason is Ext.form.FormPanel is child for Ext.Panel.

How to get the form reference? Else any other pointer to achieve file upload in extjs3.4 version?

Any help would be appreciated.

Answer 1

You're going to laugh (or bang your head against a wall): you've got a typo.

You've written:

xype: 'form'

Instead of:

xtype: 'form'