无法在extjs3中获取表单(xtype:form)引用

时间:2013-06-05 11:40:52

标签: extjs extjs3

我正在使用extjs3.4版本,这里我无法在控制器中获得直接表单引用。

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);
        }
});

在控制器中,我编写了上传按钮事件,如下所示

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

然后我尝试在控制器中获得如下表格的引用

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

我得到的错误是formRef.getForm()而不是方法。当我使用firebug进行调试时,我发现formRef指向父组件作为面板,但xtype仍然只是表单。这里我无法调用getForm方法。

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

原因是Ext.form.FormPanel is child for Ext.Panel

如何获取表单参考? 还有在extjs3.4版本中实现文件上传的任何其他指针吗?

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:3)

你会笑(或者把头撞在墙上):你有一个错字。

你写过:

xype: 'form'

而不是:

xtype: 'form'