1. #1
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Default Updating FileUploadField width

    Updating FileUploadField width


    Is there a way to make Ext.ux.FileUploadField update it width correctly?
    The matter is that when i resize browser window, text field covers the button, because its own width is not changing.
    Code:
    var fileUF = new Ext.ux.FileUploadField({
    		width: '100%',
    		name: 'scanfile',
    		id: 'scanfile',
    		hideLabel: true,		
    		overCls: 'ghghghgh',
    		buttonText: 'XXX',
    		buttonOffset: 10,
    		renderTo: 'f11'
    	});
    f11 - is a div. I belive I should update or rerender fileUF or DIV.
    Code:
    window.onresize=function(){fileUF.render('f11')};
    makes no use.
    Attached Images

  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


    '100%' is not a valid width value (only numbers are allowed).

    Is the FileUploadField in a form (or anchor) layout? In that case you can use the anchor:'100%' config option.

  3. #3
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Default


    It's in DIV which is in TD.

  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


    Too bad.

    Then you'll have to use a resize listener (as you already tried), but instead of rendering the component (already rendered -> won't work), you should set the width of the fileuploadfield to the width of the div.

  5. #5
    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


    Something like:
    Code:
    Event.on(window, 'resize', function(){
    	fileUF.setWidth(Ext.get('f11').getWidth());
    });

  6. #6
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Default


    Already wrote - its working, but size of TextField does not changing I discovered that there is no resize event fired when I resizing the window.

  7. #7
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Default Solved!

    Solved!


    The config of FileUploadField, wich make it work:
    Code:
    var fileUF_low = new Ext.ux.FileUploadField({
    		width: '100%',
    		autoWidth: true,
    		buttonOnly: false,
    		id: '........',
                          ........
    	});
    JS code placed on the page:
    Code:
    window.onresize = function(){
    .........
      document.getElementById('f21').style.width = [width in px there];		
      fileUF_low.setWidth(document.getElementById('f21').style.width - fileUF_low.buttonOffset);
    .............
    }
    thnx Condor

  8. #8
    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


    style.width isn't a number; it's a string!

  9. #9
    Ext User
    Join Date
    May 2009
    Posts
    31
    Vote Rating
    0
    Tinki is on a distinguished road

      0  

    Default


    thnx JS compiler

  10. #10
    Sencha User
    Join Date
    Dec 2010
    Posts
    8
    Vote Rating
    0
    pradippadwal is on a distinguished road

      0  

    Default Fit the FileUploadField browse button only in FormPanel

    Fit the FileUploadField browse button only in FormPanel


    Hello I have an issue with FileUploadField.
    1. I have a FileUploadField with browse button only
    2. Want to add it in FormPanel
    3. Browse button should resize according to FormPanel.

Thread Participants: 2