1. #1
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default Recommendations for "Fit to Child"

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      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
    9
    stevil will become famous soon enough

      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

Thread Participants: 2