[CLOSED] [1.0] issue w/Toolbar in Panel.Content

[randy85253]

Below is a snipit that demonstrates a problem I'm seeing when I upgraded to Ext.Net. A Toolbar placed inside a Panel.Content is not rendering right (it used to be fine, now the toolbar is collapsed). But if I place the Toolbar in the TopBar/BottomBar instead of .Content then its fine.

Is this a bug, or is this a new design requirement for toolbar placement?

<ext:ResourceManager ID="ResourceManager1" runat="server" />
  <ext:Viewport runat="server" ID="_viewPort">
    <Content>
      <ext:BorderLayout runat="server" ID="_borderLayout">
        <North >
          <ext:Panel runat="server" ID="_northPanel" >
            <Content>
              <ext:Toolbar ID="_toolbar" runat="server">
                <Items>
                  <ext:Button runat="server" Text="Click me" />
                </Items>
              </ext:Toolbar>
            </Content>
          </ext:Panel>  
        </North>
        <Center>
          <ext:Panel ID="_pagePanel" runat="server" Title="Center">
            <Content>
              <ext:Label ID="Label1" runat="server" Text="Howdy" />
            </Content>
          </ext:Panel>
        </Center>
      </ext:BorderLayout>
    </Content>
  </ext:Viewport>

[Vladimir]

Hi,

You need specify Height for the North panel

[randy85253]

Thanks, setting Panel.AutoHeight="true' fixes this.

However, this wasn't needed in 0.8. Was there a change in defaults or something that caused this change in behavior?

[Vladimir]

Hi,

This is from ExtJS 3.0 BorderLayout documentation:


<p style="margin-top: 8px !important; margin-right: 3px !important; margin-bottom: 8px !important; margin-left: 3px !important; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Notes:</p><div class="mdetail-params" style="margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><ul style="margin-top: 12px; margin-right: 12px; margin-bottom: 12px; margin-left: 12px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: circle; list-style-position: inside; list-style-image: initial; "><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-position: inside; list-style-type: circle; list-style-image: initial; ">Any container using the BorderLayout must have a child item with <tt>region:'center'</tt>. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-position: inside; list-style-type: circle; list-style-image: initial; ">Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined (an integer representing the number of pixels that the region should take up).<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-position: inside; list-style-type: circle; list-style-image: initial; ">Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-position: inside; list-style-type: circle; list-style-image: initial; ">The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel.[/list]

[randy85253]

Vladimir;

This doesn't seem to address the 'AutoHeight' scenario in the North/South panels, but it seems to work, at least in this example.

I am still tracing down some collapsed panels/toolbars that started when I upgraded to Ext.Net. The AutoHeight didn't fix all my issues.

[randy85253]

All.

For what it is worth, after chasing down my issuues in this area, I've changed my design pattern for when I want a Toolbar in a BorderLayoutRegion.

I used to either place the Toolbar directly in the region, or inside a Panels ContentControls. That wasn't as reliable after updating to 1.0.

Now I set the Toolbar as the Top/Bottom Bar of a Panel inside the Region, and set Panel.AutoHeight=true. Seems to work better.