1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default File textfield css

    File textfield css


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

    Code:
    ..., {
            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!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default


    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.

    Code:
    ...
    
    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?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Did you also include file-upload.css?

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default


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

    Thanks a lot!

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default


    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:

    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 ?

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Dec 2008
    Posts
    73
    Vote Rating
    0
    cdeguzman is on a distinguished road

      0  

    Default


    Works great! Thanks a lot

Thread Participants: 1