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,

效果如下