Results 1 to 4 of 4

Thread: Recommendations for "Fit to Child"

  1. #1
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    10
      0  

    Default Recommendations for "Fit to Child"

    I'm using a Window object, whose content is loaded dynamically. Any recommendations on how to fit the Window size to its child content? I've dorked around trying to get it to work the way I did in 3.3, where I looked at the offsetWidth/offsetHeight of the content, and then using getFrameHeight() on the Window to calculate correct chrome size, and then setSize on the Window appropriately.

    It seems though, that getFrameHeight() is nowhere to be found? only getFrameWidth() exists, and only on Element.

    stevil

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    What about just using autoHeight? This resizes the Window:

    Code:
    var win = Ext.create('Ext.window.Window', {
        autoHeight : true,
        title      : 'Test'
    });
    
    win.show();
    
    setTimeout(function() {
        win.update('This is some content<br><br>Hi');
    }, 1000);
    You can further this by adding a listener to the resize event and center the Window. This way when the content has been changed the Window gets centered to stay in the center.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    177
    Vote Rating
    2
      0  

    Default

    I'm trying to use autoWidth, autoHeight to size a window to the size of a preview image I'm displaying but the window never expands to meet the size of my content. here is my code :

    Code:
    	var win = new Ext.Window({
    			 title: imgTitle
    			,autoWidth:true
    			,autoHeight:true
    			,autoScroll:true
    			,modal:true
    			,items:[{
    			 	 xtype:'box'
    				,autoEl:{tag:'img', src:source, style:'max-width:640px;max-height:500px'}
    				
    			}]
    		}).show();
    Any suggestions?

  4. #4
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    10
      0  

    Default

    @mitchellsimoens - I could do that, but I've found that in my app, it's unpredictable. I also need to control the width.

    What I've found is that some HTML (like tables and elements with width percentages), I get different results using different starting sizes for the window (especially it's width). My content is a <form> element which contains a <table> structure.

    So I need to make the window completely autosize itself (subject to window size constraints) based on the <table> dimensions. What I've done is, when the content arrives:

    1. Render the panel with size 3000x3000 at -3500,0 (arbitrary large size, offscreen window
    2. Calculate the chrome width on the window by subtracting the current body dimensions from the panel dimensions
    3. Size the panel body to the <table> dimensions, plus some pad
    4. Size the window down to the panel dimensions plus the reserved chrome dimensions.
    5. Align the window, centered to the viewport.


    Elegant? Hell, no. Reliable? With everything I'm likely to throw at it so far, you bet.

Similar Threads

  1. TreeGrid child selection is "lost" when parent is collapsed
    By hedgesda in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 2 Mar 2010, 7:47 AM
  2. Replies: 2
    Last Post: 24 Jan 2010, 4:19 PM
  3. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •