文件上传隐藏文本字段在extJS中

时间:2012-10-31 12:09:22

标签: javascript html extjs extjs4

我正在使用extJS4作为我的GUI,因此也显示文件上传对话框。 最后我想只有一个按钮,当我点击它时会显示文件上传对话框,当我选择它时会自动上传文件。

对于自动“提交”,我知道我必须为文件上传对话框的onChange事件编写处理程序。因此,这不是问题。但有没有办法禁用文本字段而不必诉诸CSS? (当我选择要上传的文件名称被写入文本字段....我想要消除文本字段或至少使其不可见)。

1 个答案:

答案 0 :(得分:6)

您搜索的媒体资源为buttonOnly: true

Here您找到了文档

只需将其添加到示例中:

Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        buttonOnly: true,
        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.');
                    }
                });
            }
        }
    }]
});