autoHeight/autoWidth: How is this done in ExtJS4 ?

[meditecsports]

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

How is this done using ExtJS4?

[stevil]

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

[dongryphon]

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.

[meditecsports]

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

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

[meditecsports]

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

  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.

[mberrie]

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.

[meditecsports]

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?

[stevil]

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

[dherbolt]

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

[dongryphon]

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.