File textfield css

[cdeguzman]

Hi, I noticed that if I create a textfield in this manner:

..., {
        xtype : 'textfield',
        inputType : 'file' ,
       id : 'fileUploadField'}

The resulting textfield and browse button are not CSS-formatted and look significantly different from other Extjs buttons / text fields. Does anyone know how to apply them look like the standard extjs components?

Thanks a lot!

[Condor]

See examples/form/file-upload.html (it uses FileUploadField.js and file-upload.css).

[cdeguzman]

Thanks, Condor. It doesn't seem to be formatting correctly either, though. I'm seeing two textfields and two buttons, with one pair css-formatted and the other one not formatted. When I select a file with either button, both textfields are populated with the selected filename.

...
      xtype : 
'panel',
      layout : 'table',
      layoutConfig : {columns : 4},
      border :false,
      height: '100%',
      width : '100%',
      items : [

            new Ext.form.FileUploadField({
                  id : 'fileUploadField',
                  width: 100
            }), 

... 

The only difference I'm seeing is that we extended Ext.Window and added the declaration above in the overridden initComponent method. Does this matter in implementing this component?

[Condor]

Did you also include file-upload.css?

[cdeguzman]

No, can you tell me where do download it? It doesn't seem to be available from the page you linked.

[cdeguzman]

Oops, never mind I got it off another forum post.

Thanks a lot!

[Condor]

Where to download it? It's part of the standard Ext JS SDK, so you probably already have it on your system!

(it's located in examples/form/file-upload.css).

[cdeguzman]

Nope, I don't have a copy of that file in my system. I just copied the necessary selectors off a different post.

Another question, if you don't mind... Textfields with inputType = file are submittable using DWR using the following code:

    ... {
          xtype : 'textfield',
          inputType : 'file',
          id : 'fileUploadField'
    } , {
          xtype : 'button',
          text : 'Submit',
          handler: function() {
                var file = dwr.util.getValue('fileUploadField');
                dwrClass.dwrMethod(file, columns, function(data) {
                }
}
    }

However, this doesn't seem to work with the FileUploadField component. Is there a way to make FileUploadField compatible with DWR ?

[Condor]

var file = dwr.util.getValue('fileUploadField-file');

[cdeguzman]

Works great! Thanks a lot