Big Issue with ExtJS Plugin FileUpload

[odrium]

I have the follwing problem. I have a form that have the 'fileuploadfield', but by "default" it appears in the form screwed!. It appears with two buttons and two input fields, but one of them working and the other not working:

30161

As you can see in the image, the only one that works is the "grey one".

This is the function that build this item:


buildBrowseFoto : function() {
return {
xtype : 'container',
layout : 'column',
anchor : '-10',
defaultType : 'container',
defaults : {
width : 300,
labelWidth : 80,
layout : 'form'
},
items : [
{
items : {
xtype: 'fileuploadfield',
emptyText: '',
fieldLabel: 'Foto',
buttonText: 'Selecciona una foto...',
name: 'foto'
}
}
]
};
}

This is a function inside a class that extends FormPanel. Maybe it seems weird to you, but this the way Jay García build forms and so do I :P.

[mitchellsimoens]

It looks like you are overnesting as it doesn't look like you are needing the column layout.

[jay@moduscreate.com]

Definitely over nesting. :) Thanks for the shout! I am loving the clean code.

[odrium]

Still, the problem of the "two buttons" appears when I write it like:


buildBrowseFoto : function() {
return {
xtype : 'container',
layout : 'column',
anchor : '-10',
defaultType : 'container',
defaults : {
width : 300,
labelWidth : 80,
layout : 'form'
},
items : [
{
xtype: 'fileuploadfield',
emptyText: '',
fieldLabel: 'Foto',
buttonText: 'Selecciona una foto...',
name: 'foto'
}
]
};
}

I am using ExtJS 3.4 and the FileUpload version for 3.4. So it's not a version compatibility issue. Please help me here I don't know that to do.

By the way Jay, I am buying your book (the new edition) before the year ends.

PD: By the way I wanted to ask. As you can see this is a long form that have a lot of input fields, not just the 'fileuploadfield'. Do I need to write 'fileUpload:true' in the FormPanel configurations? Will it interfere with the other POST variables?

[odrium]

I missed the .css file. Is fixed now.



.x-form-file-wrap {
position: relative;
height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
right: 0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
right: 0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
position: absolute;
left: 0;
z-index: 3;
color: #777;
}