ExtJS：MessageBox不会阻止上传

问题描述

我有一个表单，其中的文件字段必须在大小限制内。 如果已达到限制，则用户可以选择是否允许文件。 “取消”将取消上传。

我有一个checkFile函数，它检查文件的大小，还有一个uploadFile函数，该文件上传检查文件结果的文件：

checkFile : function(file){
    var result = /.pdf$/i.test(file.name);
    var fileOk;
    var maxSizeMo = this.MAX_SIZE / (1024*1024);
    var cancelUpload;

    if (result) {
        if (file.size < this.ALERTE_SIZE) {
            fileOk= true;
        } else if (file.size > this.ALERTE_SIZE && file.size < this.MAX_SIZE) {
            fileOk = true;

            Ext.MessageBox.show({
                title: 'Warning',msg: 'Some msg',width: 330,buttons: Ext.MessageBox.OKCANCEL,icon: Ext.MessageBox.WARNING,closable: false,fn: function(btn){
                    if(btn!='ok'){
                        cancelUpload = true;
                    } else { 
                        cancelUpload = false;
                        return;
                    }
                }
            });

        } else {
            fileOk = false;
            cancelUpload = true;
        }
    } else {
        fileOk = false;
        cancelUpload = true;
    }
    return {isTestOk : fileOk,isCancelled : cancelUpload};
},

AND

uploadFile : function(fileField,value,eOpts){
    var file = fileField.fileInputEl.dom.files[0];
    var resultCheck = this.checkFile(file);

    if(resultCheck.isTestOk){
        if(!resultCheck.isCancelled){
            this.loadMask.show();
            app.FileUploader.uploadFile(file,this,function(success,fileName,fileReference,exception){
                try {
                    if(success === true){
                        var recordConfig = [{label : fileName,value : fileReference,supprimer : false,context : null}];
                        this.addPJAndSelect(recordConfig);
                        fileField.reset();
                    }else if(exception){
                    }
                }finally{
                    this.loadMask.hide();
                }
            });
        } else {
            PopupHelper.alerte("Upload cancelled by the user");
        }
    }
},

messageBox不会阻止上传，也不会等待用户的回答。如何等待点击按钮？

解决方法

MessageBox是异步的。您可以使用回调，例如：

...
...
    checkFile: function (file,successCallBack,successCallBackScope) {
        var result = /.pdf$/i.test(file.name);
        var fileOk;
        var maxSizeMo = this.MAX_SIZE / (1024 * 1024);
        var cancelUpload;

        if (result) {
            if (file.size < this.ALERTE_SIZE) {
                fileOk = true;
            } else if (file.size > this.ALERTE_SIZE && file.size < this.MAX_SIZE) {
                fileOk = true;

                Ext.MessageBox.show({
                    title: 'Warning',msg: 'Some msg',width: 330,buttons: Ext.MessageBox.OKCANCEL,icon: Ext.MessageBox.WARNING,closable: false,fn: function (btn) {
                        if (btn != 'ok') {
                            successCallBack.call(successCallBackScope); 
                        } else {
                            cancelUpload = false;
                            return;
                        }
                    }
                });

            } else {
                fileOk = false;
                cancelUpload = true;
            }
        } else {
            fileOk = false;
            cancelUpload = true;
        }
        return {
            isTestOk: fileOk,isCancelled: cancelUpload
        };
    },uploadFile: function (fileField,value,eOpts) {
        var file = fileField.fileInputEl.dom.files[0];
        var resultCheck = this.checkFile(file,this.successCallBack,this);

        if (resultCheck.isTestOk) {
            if (!resultCheck.isCancelled) {} else {
                PopupHelper.alerte("Upload cancelled by the user");
            }
        }
    },successCallBack: function () {
        this.loadMask.show();
        app.FileUploader.uploadFile(file,this,function (success,fileName,fileReference,exception) {
            try {
                if (success === true) {
                    var recordConfig = [{
                        label: fileName,value: fileReference,supprimer: false,context: null
                    }];
                    this.addPJAndSelect(recordConfig);
                    fileField.reset();
                } else if (exception) {}
            } finally {
                this.loadMask.hide();
            }
        });

    }
...
...

代码不可行..

,

如果使用async/await，则可以创建自己的异步方法并等待它。这是example implementation。和MessageBox覆盖。

Ext.override(Ext.window.MessageBox,{
  showAsync: function(config) {
    var me = this;
    var deferred = Ext.create('Ext.Deferred');
    me.show(config);
    /* We're overriding the userCallback below,but we want to
     * restore it after we're done,in case we decide to not use
     * showAsync next time */
    var frameworkCallback = me.userCallback;
    me.userCallback = function(buttonId,cfg) {
      // Restore framework's callback
      me.userCallback = frameworkCallback;
      deferred.resolve({
        buttonId: buttonId,value: value,cfg: cfg
      });
    };
    return deferred;
  }
});