View Full Version : FileUploadField rendered with width 0

15 Jul 2009, 11:02 PM

I have Window which contains formPanel. I'm using FileUploadField to add field for file upload but this filed is rendered with width 0.

xtype: 'fileuploadfield',
id: 'importFile',
emptyText: trans["generic.selectFile"],
fieldLabel: trans["tokens.manage.importFile"],
name: 'importFile',
width: 230,
buttonText: trans["generic.browse"]

When I use upload field in formPanel that is not in window I don't have this problem.

Screenshot is in attachment.

Thank You...

16 Jul 2009, 1:01 AM
drill down to the element using "inspect" in "firebug". Examining this will help you to see what styles are conflicting / causing the element to render at zero pixel width.

16 Jul 2009, 2:20 AM
Thank you for replying.

Yes I did that, and none of css properties are setting width to 0.
This width is set in input style attribute.

<input type="text" id="importFile" autocomplete="on" size="20" class=" x-form-text x-form-field x-form-file-text x-form-empty-field" readonly="" style="width: 0px;"/>

I don't know who or what is setting this style property (probably somewhere in Ext.form.TextField because FileUploadField extends TextField)

16 Jul 2009, 2:24 AM
what happen if you omit your width in configuration?

16 Jul 2009, 2:36 AM
When I omit width I get picture1 (field width is not 0 - there is no style attribute style="width: 0px;", but the width is not ok)

Because this field must be populated I get picture2 when field don't pass validation

16 Jul 2009, 3:06 AM
the width property is the right one, so you have something like a js error or a invalid sign so the property isn't set proper. Try output it to console

btw: in examples there is a nice fileupload example with own button, why don't you adapt this?

19 Aug 2009, 5:19 AM
@steffenk - I did use that file upload example but I put it in window (and there was one problem)


I just wanted to say that I solved (bypass) this problem, but I'm not sure if it is a bug in Ext, because I found similar problems with form items width.

Problem shows when I render form panel (with its items) in window and for showing window
use animate from Ext.getBody(). In this case file upload item had width 0, but in other example combo box item was longer than text item in same form.

I bypassed this problem by puting this items in column.

18 Sep 2009, 1:55 AM
I have the same problem, and I think that there is something bad with the layout.
If you run the example in a window you can see the same problem.
The input field is set with a width of 0 pixel.
If you hack the size using firebug, the field is correct.
If you resize the window, the onResize function is called and the field size is set with the correct value.

I thing that it's a bug
Could Ext team help us ?

11 Oct 2009, 12:20 PM
Hi All: Same problem. Fixed it by removing the animateTarget property from the Window config.

13 Jul 2010, 4:35 AM
Same goes for me; no window at all,
using FF 3.6.6 on WinXP with ExtJS 3.2.1
Component hierarchy is as follows:
Viewport-> Center-Region-> GroupTab -> TabPanel -> CardLayout -> Form

Will investigate further in Firebug and post results

25 Aug 2010, 4:16 AM

Is there any news on this problem yet?

I am having some difficulty as well.

Similar to Mjollnir26, I have a viewport with a center region that displays different content based on a combo. My file upload form will correctly render if it is on the initial center region being displayed. If I change the center region to another panel with

the form is not rendered correctly as noted in other threads in this post.

I'm not using animateTarget as far as I know.



10 Mar 2011, 9:14 AM
Anyone get anywhere with this?

1 Jun 2011, 4:37 AM
If you have a component hierarchy simmilar to this:

Window > form > fields
Window > form > tabpanel(s) > fields

and you didn't specify the layout of the window or the window has an anchor layout you probably will solve this issue by setting the anchor config option for the fields to 100% or what ever suits your needs.