Ext.form.Field's setValue in extjs 2.0.2 causes browser security w/ BrowseButton binding

[GoogleCodeExporter]

What steps will reproduce the problem?

This bug concerns the BrowseButton user extension I'm working on
(http://code.google.com/p/gwt-ext-ux/wiki/BrowseButton).  The code for the
binding is now in SVN although I haven't added the demo to Showcase2 (it's
there though). 

1. The BrowseButton extension basically works by creating and detaching a
new file element each time the button is clicked.

2. It contains a method detachInputFile() which produces a native
javascript element with input type 'file' after a button click.  I've added
a binding to this method which returns the file element as a JavaScriptObject.

2. In order to get this object into a gwt-ext TextField w/ input type
'file' so that I can use it in a form, I use the following code (in SVN
along with Ext.ux.form.BrowseButton.js:

private TextField getFileField(String name) {
    JavaScriptObject inputFile = detachInputFile(false);
    ExtElement e = new ExtElement(inputFile);
    e.getDOM().setAttribute("name", name);
    TextField tf = new TextField();
    tf.setInputType("file");
    tf.setEl(e.getDOM());
    return tf;
}

What is the expected output? What do you see instead?

The binding works in hosted mode, however, I get browser security errors in
Firefox because of Ext.form.Field's setValue method trying to set the value
of the file element (which can't happen):

>>> Ext.form.Field:

        setValue : function(v){
            this.value = v;
            if(this.rendered){
                this.el.dom.value = (v === null || v === undefined ? '' : v);
                this.validate();
            }
        }

This occurs because the line checking whether v is null or undefined
ultimately sets the value to either '' or the existing value. For an input
type 'file', this is a browser security error.  

The only way I've found to fix this is to apply the attached patch to
com.gwtext.client.widgets.form.Field.  The patch basically overrides
Ext.form.Field's setValue method from within gwt-ext's Field class, and
simply attempts to set the value only if it's null or undefined.  In the
case that the value is not null or undefined, it leaves the value alone
rather then setting it to itself, avoiding the browser security error:

>>> Ext.form.Field (patched):
        setValue : function(v){
            this.value = v;
            if(this.rendered){
                if(v === null || v === undefined) {
                    this.el.dom.value = ''
                }
                this.validate();
            }
        }

What version of the product are you using? On what operating system?
GWT-1.5.2, GWT-Ext-2.0.5, Gentoo Linux 2008.0 (amd64) w/ 2.6.25 kernel

Please provide any additional information below.
The attached patch overrides the setValue method in Ext.form.Field from
within gwt-ext rather then in extjs.  This way the user doesn't have to
modify extjs.  I'd be interested to know if there's a better way to go
about this whole issue that I'm not seeing.  Thanks! 

~jtriley

Original issue reported on code.google.com by justin.t...@gmail.com on 25 Sep 2008 at 4:18

Attachments:

• Field.patch

[GoogleCodeExporter]

Added the patch to SVN.  THX Justin!

Original comment by mlim1...@gmail.com on 30 Sep 2008 at 6:20

• Changed state: Fixed
• Added labels: Milestone-2_0_6

[GoogleCodeExporter]

Revised the code since setting values was not getting set.  The code now checks 
the 
type and if it is of type 'file' then the code will not set the dom.value:

setValue : function(v){
    this.value = v;
    if(this.rendered){
        if(this.type != 'file'){
            this.el.dom.value = (v === null || v === undefined ? '' : v);
        }
        this.validate();
    }
}

Original comment by mlim1...@gmail.com on 7 Oct 2008 at 4:21

[GoogleCodeExporter]

This fix doesn't work in firefox (it produce security errors), becouse field 
has 
undefined type value when it is checked. I overrided setValue method to check 
name 
value:

setValue : function(v){
    this.value = v;
    if(this.rendered){
        if(this.name != 'file'){
            this.el.dom.value = (v === null || v === undefined ? '' : v);
        }
        this.validate();
    }
}

It also need to override BrowseButton getFileField method to set field name:

private TextField getFileField(String name) {
    JavaScriptObject inputFile = detachInputFile(false);
    ExtElement e = new ExtElement(inputFile);
    e.getDOM().setAttribute("name", name);
    TextField tf = new TextField(null, "file");
    tf.setInputType("file");
    tf.setEl(e.getDOM());
    return tf;
}

Then it will be working!

Original comment by yuppy...@gmail.com on 7 Jan 2009 at 5:00