EXTJS4 Learning (13) How to add a background image to the File Upload button

The upload buttons We see every day are like this.

Of course, browse is the default, we can change it, such as replace with "upload", CONFIGURED as ButtonText: ' Upload ',

If we want to add a background image to the button, you may have noticed this configuration Buttonconfig

{  xtype: ' Filefield ',  emptytext: ' Select an image ',  fieldlabel: ' Photo ',  name: ' Photo-path ',  ButtonText: ",  buttonconfig: {     iconcls: ' Upload-icon '}  }

What's the actual effect?

If your background picture is exactly that size, congratulations on the content behind you, you have solved the problem.

Just if your background picture is such a size?

Try it out, and you'll find that the final explicit effect of the button is still a little bit, and the effect is like this

As if still did not meet the requirements, can't help but ask, this width can be set?

Let's try the code below

{  xtype: ' Filefield ',  emptytext: ' Select an image ',  fieldlabel: ' Photo ',  name: ' Photo-path ',  ButtonText: ',  buttonconfig: {    iconcls: ' Browse ',    width:154  }}

The effect is like this

Alas, as if still not, the background picture seems to be limited, how can we solve it?

That's when I thought of another configuration CLS

{  xtype: ' Filefield ',  emptytext: ' Select an image ',  fieldlabel: ' Photo ',  name: ' Photo-path ',  buttontext: ',  buttonconfig: {    width:154,    height:41,    cls: ' Browse ',  }}

The effect is as follows

Here is a point, Filefield width configuration must reach a certain size, otherwise the button will go to the left, covering the box, the effect is as follows

Now reach our request, and if we just need a button, can this

Plus two configurations

Buttononly:true,
Hidelabel:true,

The effect is as follows

EXTJS4 Learning (13) How to add a background image to the File Upload button