我正在尝试将文件字段创建为带有图标的按钮。在文档中似乎现代 6.2.0 不支持此功能。有办法吗?
文档链接: http: //docs.sencha.com/extjs/6.2.0/modern/Ext.field.File.html
似乎也没有办法更改默认按钮中的文本或随附的文本。
我正在尝试将文件字段创建为带有图标的按钮。在文档中似乎现代 6.2.0 不支持此功能。有办法吗?
文档链接: http: //docs.sencha.com/extjs/6.2.0/modern/Ext.field.File.html
似乎也没有办法更改默认按钮中的文本或随附的文本。
有一个很好的解决方案:
{
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
}
而已...
这是设计使然。文件输入的文本是浏览器定义的,开发人员不能更改。通常人们通过生成一个显示:隐藏文件输入和一个通过 JS 触发文件输入的通用按钮来解决这个问题。
我担心您将不得不转向 ExtJS 中的类似措施。
作为参考,这里有一个关于如何更改普通 HTML 文件输入元素标签的讨论:Labeling file upload button