Question

我从ExtJs 4.1移到了ExtJs 4.2，因为filefield组件出现了可怕的麻烦。主要的麻烦是在ExtJs 4.1中，每个表单提交后都清除了文件字段。根据这个thread，在ExtJs 4.2中他们解决了这个问题，但是，尽管我将clearOnSubmit设置为{{1}，但我的应用程序仍面临同样的问题。 }}。我甚至弄明白代码会导致整个问题：

false

当表单提交给服务器并销毁初始元素时，会调用此库方法：

 Ext.define('Ext.form.field.FileButton', {
     ...
 createFileInput : function(isTemporary) {
    var me = this;
    //ATTENTION!
    //before me.el.createChild is called
    //me.fileInputEl contains initial filefield:
    //<input id="filefield-2144-button-fileInputEl" class=" x-form-file-input" type="file" size="1" name="file_name" role="">
    me.fileInputEl = me.el.createChild({
        name: me.inputName,
        id: !isTemporary ? me.id + '-fileInputEl' : undefined,
        cls: me.inputCls,
        tag: 'input',
        type: 'file',
        size: 1
    });
    //ATTENTION!
    //now initial fielfield is gone, even though we have set clearOnSubmit to false
    me.fileInputEl.on('change', me.fireChange, me);  
  }
...

并用一个新的空的替换它：

 <input id="filefield-2144-button-fileInputEl" class=" x-form-file-input" type="file" size="1" name="file_name" role="">

那么，这有什么问题，如何解决这个库错误。

Answer 1

我在4.2.1上测试过它。它的工作正常。提交后文件字段没有被清除。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        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...',
                clearOnSubmit: false
            }],

            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.');
                            }
                        });
                    }
                }
            }]
        });
    }
});

仍清除带有clearOnSubmit false的文件字段

1 个答案: