Отправить форму с функцией загрузки не работает - Extjs

Question

Ниже приведено мое всплывающее окно onclick кнопки. После выбора и нажатия кнопки «Загрузить» я не могу отправить форму.

function uploadStockDetails(){ 
    try{ 
     var stockAuditUploadFile = Ext.widget('window', { 
     title: 'Upload the Stock Audit file', 
     closeAction: 'hide', 
     width: 400, 
     autoHeight: true, 
     layout: 'fit', 
     resizable: false, 
     modal: true, 
     items: [{ 
      xtype: 'filefield', 
      name: 'file', 
      fieldLabel: 'File', 
      labelWidth: 50, 
      msgTarget: 'side', 
      allowBlank: false, 
      anchor: '100%', 
      buttonText: 'Browse' 
     }], 
     buttons: [{ 
      text: 'Upload', 
      handler: function() { 
       alert('asdhj'); 
       var form = stockAuditUploadFile.getForm(); 
       alert(form);// not reachable. No alert appearing. 
       if(form.isValid()){ 
        form.submit({ 
         url: 'StockAuditUpload', 
         waitMsg: 'Uploading your file...', 
         success: function(fp, o) { 
          Ext.Msg.alert('Success', 'Your file has been uploaded.'); 
         } 
        }); 
       } 
      } 
     }] 
    }); 
    stockAuditUploadFile.show(); 
    } catch(e) { 
     alert("Exception in uploadStockDetails"+e.message); 
    } 
} 

Другие способы я пытался представить форму были
this.up('form').getForm();
this.prev('form').getForm();
this.ownerCt.down('form').getForm();

Все вышеперечисленные методы не дают мне желаемых результатов. Я чувствую, что ошибся в создании окна и что я должен создать форму.
Может кто-нибудь предложить?

Answer 1

Я попытался сильфон кода для файла-загрузки в ExtJS

Надеются, что это может помочь вам.

function uploadStockDetails(){ 
try{ 
    var stockAuditUploadFile = Ext.create('widget.window',{ 
     title:'Upload the Stock Audit file', 
     closeAction: 'hide', 
     width: 400, 
     autoHeight: true, 
     layout: 'fit', 
     resizable: false, 
     modal:true, 
     items : [ 
        self.stockAuditUpload(), 
       ] 
     }); 
    stockAuditUploadFile.show(this,function(){ 
    }); 
} catch(e) { 
    alert("Exception in uploadStockDetails"+e.message); 
} 
} 

this.stockAuditUpload = function(){ 
var fileUploaddata = { 
    items:[{ 
    xtype: 'container', 
    layout: { 
     type: 'hbox', 
     align: 'center', 
     pack: 'center', 
    }, 
items:[{ 
     xtype: 'form', 
     maxWidth: 800, 
     flex: 1, 
     bodyPadding: '20 20 20 7', 
     title: '', 
      items: [{ 
xtype: 'filefield', 
         id: 'uploadFile', 
         name: 'uploadFile', 
         buttonText: 'Browse', 
         regex: (/.(gif|jpg|jpeg|png)$/i), 
         regexText: 'Only image files allowed for upload', 
         msgTarget: 'side', 
        }] 
      }], 
buttons: [{ 
         text: 'Upload', 
         handler: function() { 
          var form = this.up('form').getForm(); 
          var uplodedFile = Ext.getCmp("uploadFile").getValue(); 
          // if you make console log of 'uplodedFile' you will get file path as C:\fakepath\filename.jpg 
          if (form.isValid()) { 
          form.submit({ 
           url:// Provide Upload url Ex: uploadfile.php 
           //and add file functionality in php. so it will take file path as well as file name 
           waitMsg: 'Uploading your file...', 
           success: function(fp, o) { 
            Ext.Msg.alert('Success', 'Your file has been uploaded.'); 
           } 
          }); 
}else{ 
           Ext.Msg.alert('Error', ' Please fill the Mandatory fields'); 
          } 
         } 
        },{ 
         text: 'Cancel', 
         handler: function() { 
          this.up('window').close(); 
         } 
        }] 
    }] 
}; 
fileUploaddata; 
}; 

Answer 2

Вы не создали форму и непосредственно создавая FileField внутри window.For этой причине, вы получаете неопределенными/нуль.

Чтобы получить форму, сначала создайте объект Ext.form.Panel, а затем поле файла в качестве элемента.

Ext.create('Ext.form.Panel', { 
title: 'Upload a Photo', 
width: 400, 
bodyPadding: 10, 
frame: true, 
renderTo: Ext.getBody(), 
items: [{ 
    xtype: 'filefield', 
    name: 'photo', 
    fieldLabel: 'Photo', 
    labelWidth: 50, 
    msgTarget: 'side', 
    allowBlank: false, 
    anchor: '100%', 
    buttonText: 'Select Photo...' 
}], 

buttons: [{ 
    text: 'Upload', 
    handler: function() { 
     var form = this.up('form').getForm(); 
     if(form.isValid()){ 
      form.submit({ 
       url: 'photo-upload.php', 
       waitMsg: 'Uploading your photo...', 
       success: function(fp, o) { 
        Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.'); 
       } 
      }); 
     } 
    } 
}] 

});