Question

下面是我的弹出窗口，点击一个按钮。选择并单击“上传”按钮后，我无法提交表单。

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

您尚未创建表单并直接在窗口内创建文件字段。因此，您将获得未定义/ null。

为了获取表单，首先创建一个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.');
                }
            });
        }
    }
}]

}）;

提交表单，上传功能不起作用 - Extjs

2 个答案: