PDA

View Full Version : Big Issue with ExtJS Plugin FileUpload



odrium
19 Dec 2011, 12:14 PM
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
19 Dec 2011, 1:02 PM
It looks like you are overnesting as it doesn't look like you are needing the column layout.

jay@moduscreate.com
19 Dec 2011, 1:06 PM
Definitely over nesting. :) Thanks for the shout! I am loving the clean code.

odrium
19 Dec 2011, 3:36 PM
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
20 Dec 2011, 5:35 PM
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;
}