views:

461

answers:

1

I'm using ExtJS 3.2 and have content inside of a tab panel, and the tab panel inside of a container in a Viewport. The actual TabPanel resizes correctly on the viewport size changes, but the content inside a panel in the TabPanel seems to be a fixed width and will not shrink when the window is resized.The strange thing is it grows if I increase the window size. How can I get the content inside a Tabpanel to shrink on window resizing.

Sorry for this being confusing, my structure is this:

Viewport (rendered to body, and sets defaults {monitorResize:true}) 
  - Text Label
  - TabPanel
    - Tab
      - Container (Border Layout)
      - Panel 1 (Center)
      - Panel 2 (East)
      - Panel 3 (South)

Thanks in advance!

A: 

99% of the time this boils down to a container not having a layout specified and/or excessive nesting of containers. Make sure that the containing TabPanel has an appropriate layout set. If you can't get it working you'll have to post some code (ideally a cut-down use case).

EDIT: Re-reading your pseudocode, I doubt there is any need for "Container" as a separate level -- the Tab is itself a Panel, and can have a BorderLayout and contain your child regions. I would bet that your Tab level currently has no layout assigned.

bmoeskau
Shouldnt it default to a container layout though? Since it extends container and thats the default layout for a container?
joshowen
Read the docs on ContainerLayout. It does not manage sizing of child items (hence, the issues you are seeing). You would want Fit, Border or some other layout. But again, you don't even need that level at all. Just make Tab your BorderLayout.
bmoeskau