Question

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

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

似乎还没有一种方法可以更改默认按钮或附带文本中的文本。

Answer 1

这是设计上的。文件输入的文本是浏览器定义的，并不打算由开发人员更改。通常人们通过生成显示来解决这个问题：隐藏文件输入和通过JS触发文件输入的通用按钮。

我担心你不得不转向ExtJS中的类似措施。

这里有关于如何更改普通旧HTML文件输入元素标签的SO的讨论：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现代文件字段作为按钮

2 个答案: