Question

我有一个ExtJS FormPanel，包含不同的表单项（文本字段，数字等），在某些情况下我需要以这种形式上传一个附加文件。

（在我看来）最好的解决方案是FormPanel中的extJs文件字段，一旦用户选择了文件就会立即开始上传。成功上传文件后（从服务器获取{success：true，fileid：17}）文件字段应该消失，并且应显示文本消息（“文件上传成功”）。除了文本消息之外，还必须将带有fileid的（新）隐藏输入添加到FormPanel：

用户使用ExtJs文件字段选择文件。
立即开始上传（onChange）。
服务器成功回答：true和fileId
文本“文件上传成功”替换文件字段
将带有fileId的隐藏表单项添加到表单

有没有办法用ExtJS 4实现这个（或类似的解决方案）？

Answer 1

最简单的方法是在面板中包装filefield并替换处理程序中的内容。例如：

var formPanel = Ext.create('Ext.form.Panel', {
    renderTo: 'testdiv',
    title: 'Basic information',
    id: 'schnitzel',
    items: [
        {
            xtype: 'textfield',
            name: 'title',
            fieldLabel: 'Title'
        },
        {
            xtype: 'panel',
            layout: 'fit',
            border: false,
            items: [{
                xtype: 'filefield',
                buttonOnly: true,
                name: 'file',
                onChange: function(value) {
                    var panel = this.ownerCt;
                    formPanel.submit({
                        url: 'index4_submit.php',
                        waitMsg: 'Uploading the image ..',
                        clientValidation: false,
                        success: Ext.Function.bind(panel.onSuccess, panel)
                    });                    
                }
            }],
            onSuccess: function(form, action) {
                if (action.result.success !== true) {
                    return;
                }

                this.removeAll();
                this.add({ 
                    xtype: 'label',
                    text: 'File upload was successful'
                });
                this.add({ 
                    xtype: 'hidden',
                    name: 'file',
                    value: action.result.fileid
                });
            }
        }
    ]
});

ExtJS后台文件上传

1 个答案: