1. #1
    Ext JS Premium Member meditecsports's Avatar
    Join Date
    Oct 2010
    Location
    Germany
    Posts
    47
    Vote Rating
    2
    meditecsports is on a distinguished road

      0  

    Default autoHeight/autoWidth: How is this done in ExtJS4 ?

    autoHeight/autoWidth: How is this done in ExtJS4 ?


    In ExtJS3 I used the autoHeight/autoWidth properties to let containers have the right dimensions.

    How is this done using ExtJS4?

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


    Quote Originally Posted by meditecsports View Post
    In ExtJS3 I used the autoHeight/autoWidth properties to let containers have the right dimensions.

    How is this done using ExtJS4?
    I believe the layout managers are expected to handle this - Card and Fit layouts, for example, will autosize child components appropriately... (in other words, ALWAYS specify a layout on the container)

    stevil

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,346
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Layouts definitely play a big part in this, but content size can also contribute.

    The idea is to supply autoHeight and/or autoWidth as before and don't set the width or height properties. This is like 3.x, but in 4.x the Panel and its DockLayout do set dimensions (based on measurements) to wrap the content in the proper bordering.

    Sadly, there are some bugs (still open) on this. For one:

    http://www.sencha.com/forum/showthread.php?133421

    If you have an example that isn't working, please post it so we can see what might be wrong.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Ext JS Premium Member meditecsports's Avatar
    Join Date
    Oct 2010
    Location
    Germany
    Posts
    47
    Vote Rating
    2
    meditecsports is on a distinguished road

      0  

    Default tabpanel with autoHeight/autoWidth

    tabpanel with autoHeight/autoWidth


    Actually, I want a Tabpanel to resize itself depending on the Tab that is activated:

    Code:
         xtype: 'tabpanel',
                autoWidth: true,
                autoHeight: true,
                items: [
                    {
                        xtype: 'container',
                        title: 'One',
                        height: 100
                    },
                    {
                        xtype: 'container',
                        title: 'Two',
                        height: 500
                    }
                ]

  5. #5
    Ext JS Premium Member meditecsports's Avatar
    Join Date
    Oct 2010
    Location
    Germany
    Posts
    47
    Vote Rating
    2
    meditecsports is on a distinguished road

      0  

    Default tabpanel with autoHeight/autoWidth

    tabpanel with autoHeight/autoWidth


    Actually, I want a Tabpanel to resize itself depending on the Tab that is activated:

    Code:
      xtype: 'tabpanel',
      autoWidth: true,
      autoHeight: true,
      items: [
          {
               xtype: 'container',
               title: 'One',
               height: 100
          },
          {
               xtype: 'container',
               title: 'Two',
               height: 500
          }
       ]
    The tabpanel only uses the first items height.

  6. #6
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    If I remember correctly the solution in Ext3 was to set autoHeight: true on all child items (the tabs), not (necessarily) on the TabPanel itself.

    Not sure if this still works in Ext4.

    In my Ext3 project I used browser-managed layouts extensively, that is using the default layout for Containers/Panels and not specifying a custom layout, and it wasn't always straight forward to make things work.

    I am currently in the process of migrating this app to Ext4, and I expect it to be a cumbersome process in regards to making these non-managed layouts work.

    Please report your findings in this thread.

  7. #7
    Ext JS Premium Member meditecsports's Avatar
    Join Date
    Oct 2010
    Location
    Germany
    Posts
    47
    Vote Rating
    2
    meditecsports is on a distinguished road

      0  

    Default


    I still don't have any solution for the dynamic height of TabPanels. Nobody, who has used this in ExtJS3 and is now nailed down to have a fixed height in ExtJS4?

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


    Quote Originally Posted by meditecsports View Post
    Actually, I want a Tabpanel to resize itself depending on the Tab that is activated:
    Sizing parent to child is an issue (to me) with most (if not all) containers - sizing child to parent much less so.

    stevil

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    Pilsen, Czech Republic
    Posts
    40
    Vote Rating
    0
    dherbolt is an unknown quantity at this point

      0  

    Default


    autoHeight=true can be probably replaced by manageHeight=false.

  10. #10
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,346
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    The old autoHeight config is equivalent to not specifying a "height" config and also not specifying any layout-specific configs (e.g., "flex"). In that case, the component is "auto height".

    The manageHeight config instructs the dock layout to not write heights to the DOM basically. In theory this should be "better" but has issues at times. The primary reason we added it (and are working to resolve its issues), is it works with animations that effect the height. For example in the new tree picker.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"