Extjs 6.2.0 现代文件字段作为按钮

Question

我正在尝试将文件字段创建为带有图标的按钮。在文档中似乎现代 6.2.0 不支持此功能。有办法吗？

Link 到文档：http://docs.sencha.com/extjs/6.2.0/modern/Ext.field.File.html

似乎也没有办法更改默认按钮中的文本或随附的文本。

Answer 1

这是设计使然。文件输入的文本是浏览器定义的，开发人员无意更改。通常人们通过生成一个 display:hidden 文件输入和一个通过 JS 触发文件输入的通用按钮来解决这个问题。

恐怕您将不得不转向 ExtJS 中的类似措施。

这里有一个关于如何更改普通旧 HTML 文件输入元素的标签的讨论供参考：Labeling file upload button

Answer 2

有一个很好的解决方案：

{
        xtype : 'button',
        text : 'add a file',
        handler : 'onAddFile'
},

然后在控制器中：

onAddfile: function() {
    var me = this;

    var fileupload = Ext.create('Ext.form.Panel', {
        // renderTo: Ext.getBody(),
        title : 'Upload Panel',
        height : 0,
        width : 0,
        items : [ {
            xtype : 'filefield',
            label : 'any thing',
            accept: 'application/zip',//or mediatypes that you want
            multiple : false,//or true if you need
            controller : me,
            listeners : {
                change : function(field) {
                    me.fileSelected(field);
                }
            }
        } ]
    });
    //this is important to click programmaticallly
    fileupload.element.dom.querySelector('.x-button-el').click();

},

fileSelected: function (field) {
        let files = field.getFiles();
        // now you have the files
}

就是这样...

Extjs 6.2.0 现代文件字段作为按钮

Extjs 6.2.0 modern filefield as button

javascript

extjs

extjs6-modern

extjs6.2