ExtJs4学习(十三)如何给文件上传按钮加背景图片
我们日常看到的上传按钮都是这样的
当然browse是默认的,我们可以去改变它,比如替换成“上传”,配置为buttonText: ‘上传‘,
如果我们想给按钮添加背景图片呢,你可能注意到了这个配置 buttonConfig
{ xtype: 'filefield', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls: 'upload-icon' } }实际效果又是怎样的呢
如果你的背景图片刚好是那个大小,恭喜你后面的内容不用看了,你已经解决问题了。
只是如果你的背景图片是这样的大小呢
不妨试试,最后会发现,按钮最终的显式效果,竟然还是显式那么一点点,效果是这样的
好像还是没达到要求,不禁反问,这个宽度可以设置吗?
我们试一下,代码如下
{ xtype: 'filefield', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls: 'browse', width:154 } }效果是这样的
哎呀,好像还是不行,背景图片好像被限制了,那能怎么解决呢
这时候我想到了另外一个配置cls
{ xtype: 'filefield', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { width:154, height:41, cls: 'browse', } }效果如下
这里说到一点,filefield的width配置必须达到一定大小,不然按钮会往左靠,覆盖掉框,效果如下
现在达到我们的要求了,如果我们只需要按钮,可以这样
加两个配置
buttonOnly: true,
hideLabel: true,
效果如下
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。