[CLOSED] Collapsible HBox panels?

**mattwoberts** · Sep 16, 2011, 3:03 PM

Hi,

I have 2 panels inside a container with a HBox layout like this:

            <ext:Container Split="true" ID="GraphsContainer" runat="server" RowHeight="0.5" Layout="hbox">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>

Inside are 2 panels with flex = 1. Is it possible to make the panel on the left collapsible, so that I can minimzie it and have the panel on the right take all the horizontal room? If I just add allow collapsible it collapses vertically but will keep its space.

Thanks

Matt

**Daniil** · Sep 16, 2011, 3:32 PM

Hi,

I'd suggest you to use BorderLayout, it works fine with collapse/expand mechanism.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel 
            runat="server" 
            Layout="BorderLayout" 
            Width="500" 
            Height="200">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="West" 
                    Title="Left" 
                    Width="150"
                    Collapsible="true" />
                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Title="Right" />
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

**mattwoberts** · Sep 20, 2011, 8:10 AM

Hi,
Thanks for the response.

I forgot to mention that the hbox layout is itself within a RowLayout - so I can't do that I think. My full layout:

<ext:Viewport ID="Viewport1" runat="server" Layout="row">
        <Items>
        <ext:RowLayout runat="server" Split="true">
            <Rows>
        
            <ext:LayoutRow RowHeight="0.5">
            <ext:Container ID="GraphsContainer" runat="server" RowHeight="0.5" Layout="hbox">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Panel ID="GraphSummaryPanel"
                        runat="server"
                        Title="Link State Changes Summary" Icon="ChartBar"
                        Flex="1" Padding="15" ContextMenuID="ChangeGraphContextMenu">
                        <TopBar>
                            <ext:Toolbar ID="SummaryToolBar" runat="server" Height="27">
                            <Items>
                                 <ext:Hidden ID="txtHiddenCableId" runat="server" Text='' AutoDataBind="true"></ext:Hidden>
                                 <ext:Hidden ID="txtHiddenCableHighlightLabel" runat="server" Text='' AutoDataBind="true"></ext:Hidden>
                                 <ext:ComboBox Hidden="true" SelectedIndex="0" ID="PeriodSelector" Editable="false" LabelWidth="150" runat="server" Width="250px" FieldLabel="Show changes from the last 7 ">
                                    <Items>
                                        <ext:ListItem Text="Days" Value="Days" />
                                        <ext:ListItem Text="Weeks" Value="Weeks" />
                                        <ext:ListItem Text="Months" Value="Months" />
                                    </Items>
                                    <Listeners>
                                        <Select Handler="SummaryGraph.periodChanged();" />
                                    </Listeners>
                                 </ext:ComboBox>
                                  <ext:ToolbarFill />
                            </Items>
                            </ext:Toolbar>

                        </TopBar>
                        <Content>
                            <div id="summaryplaceholder" style="width:100%;height:300px;"></div> 
                        </Content>
                        <Listeners>
                            <Resize Fn="Changes.resizeCurrentChart" />
                        </Listeners>
                    </ext:Panel>

                    <ext:Panel ID="DetailsSummaryPanel"
                        runat="server"
                        Title="Change Details Graph" Icon="ChartLine"
                        Flex="1" Padding="15">
                        <TopBar>
                            <ext:StatusBar ID="ChangeGraphStatusBar" runat="server">
                            <Items>
                                <ext:Button ID="ResetDetailGraph" runat="server" Text="Reset graph zoom" Icon="Zoom">
                                <Listeners>
                                    <Click Handler="DetailsGraph.drawChangeGraph(DetailsGraph.chartData);" />
                                </Listeners>
                                </ext:Button>
                            </Items>
                            </ext:StatusBar>
                        </TopBar>
                        <Content>
                            <div id="chartcontainer" style="width:100%;height:300px"></div>
                        </Content>
                        <Listeners>
                            <Resize Fn="DetailsGraph.resizeDetailsChart" />
                        </Listeners>
                    </ext:Panel>
                </Items>
            </ext:Container>
            </ext:LayoutRow>

            <ext:LayoutRow RowHeight="0.4">
            <ext:GridPanel 
            </ext:GridPanel>
            </ext:LayoutRow>

            <ext:LayoutRow> 
            <ext:Panel ID="ChangesChannel" runat="server" Height="70">
            <Content>
                <div id='channel_container'></div>
            </Content>
            </ext:Panel>
            </ext:LayoutRow>

            </Rows>
            </ext:RowLayout>
        </Items>
    </ext:Viewport>

**Daniil** · Sep 20, 2011, 8:54 AM

You can use BorderLayout inside RowLayout as well.

**mattwoberts** · Sep 21, 2011, 9:26 AM

Hi.

Thanks for your response.

Unfourtunately I still cannot get this working - I'm pretty close though. I've changed the "GraphsContainter" to use a BorderLayout as per your suggestion. This works for the collapsible problem. However the issue I have now is that inside that BorderLayout, I have 2 panels which I want to use 50% of the available width. As far as I can work out you can't achieve this with BorderLayout (that's why I originally used HBox).

Could you tell me how to make the 2 panels in the GraphsContainer = 50% available width each?

EDIT: I've also just noticed that the the panel on the right collapses upwards - is this because it's the "center" ?

**mattwoberts** · Sep 21, 2011, 9:41 AM

Here is the markup as good as I can get it - I've had to add a "center" panel with nothing in and a East panel for the right-hand graph. Problem is the width issue I explained previously. Please help!

<ext:Panel ID="GraphsContainer" runat="server" Layout="BorderLayout">
<Items>
  <ext:Panel ID="GraphSummaryPanel" runat="server" Title="Link State Changes Summary"
    Icon="ChartBar" Collapsible="True" TitleCollapse="True" Region="West" Padding="15"
    Width="600" ContextMenuID="ChangeGraphContextMenu">
    <TopBar>
      <ext:Toolbar ID="SummaryToolBar" runat="server" Height="27">
        <Items>
          <ext:Hidden ID="txtHiddenCableId" runat="server" Text='' AutoDataBind="true">
          </ext:Hidden>
          <ext:Hidden ID="txtHiddenCableHighlightLabel" runat="server" Text='' AutoDataBind="true">
          </ext:Hidden>
          <ext:ComboBox Hidden="true" SelectedIndex="0" ID="PeriodSelector" Editable="false"
            LabelWidth="150" runat="server" Width="250px" FieldLabel="Show changes from the last 7 ">
            <Items>
              <ext:ListItem Text="Days" Value="Days" />
              <ext:ListItem Text="Weeks" Value="Weeks" />
              <ext:ListItem Text="Months" Value="Months" />
            </Items>
            <Listeners>
              <Select Handler="SummaryGraph.periodChanged();" />
            </Listeners>
          </ext:ComboBox>
          <ext:ToolbarFill />
        </Items>
      </ext:Toolbar>
    </TopBar>
    <Content>
      <div id="summaryplaceholder" style="width: 100%; height: 300px;">
      </div>
    </Content>
    <Listeners>
      <Resize Fn="Changes.resizeCurrentChart" />
    </Listeners>
  </ext:Panel>
  <ext:Panel ID="Panel1" runat="server" Title="x" Region="Center"  Width="1"  />
  <ext:Panel ID="DetailsSummaryPanel" runat="server" Title="Change Details Graph" Icon="ChartLine"
    Region="East" Width="600" Padding="15" Collapsible="True" TitleCollapse="True">
    <TopBar>
      <ext:StatusBar ID="ChangeGraphStatusBar" runat="server">
        <Items>
          <ext:Button ID="ResetDetailGraph" runat="server" Text="Reset graph zoom" Icon="Zoom">
            <Listeners>
              <Click Handler="DetailsGraph.drawChangeGraph(DetailsGraph.chartData);" />
            </Listeners>
          </ext:Button>
        </Items>
      </ext:StatusBar>
    </TopBar>
    <Content>
      <div id="chartcontainer" style="width: 100%; height: 300px">
      </div>
    </Content>
    <Listeners>
      <Resize Fn="DetailsGraph.resizeDetailsChart" />
    </Listeners>
  </ext:Panel>
</Items>
</ext:Panel>

**Daniil** · Sep 21, 2011, 9:47 AM

I can suggest the solution below, see the Render listener.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel
            ID="Panel1"
            runat="server" 
            Width="500" 
            Height="150" 
            Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    ID="Panel2" 
                    runat="server" 
                    Region="West" 
                    Title="Left" 
                    Collapsible="true" />
                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Title="Right" />
            </Items>
            <Listeners>
                <AfterRender Handler="Panel2.setWidth(this.getWidth() / 2); Panel1.doLayout();" />
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>

**mattwoberts** · Sep 21, 2011, 9:53 AM

Thanks Danni, I'll try that, hopefully I can use that for the graph on the left (West) and right (East) in my markup

**Daniil** · Sep 21, 2011, 9:54 AM

Originally Posted by mattwoberts

EDIT: I've also just noticed that the the panel on the right collapses upwards - is this because it's the "center" ?

I'm afraid I don't understand the question. If it's still actual please clarify.

**mattwoberts** · Sep 21, 2011, 10:42 AM

Hi Danni.

It's almost working (again) for me. The issue remaining is that because I need to be able to collapse either the right or the left panel, I need to use a East and West region - your demo uses Center and West regions.

I've added some code to handle this, which I'll paste here. The only issue is that if you collapse a panel, then expand it again, and then expand it again, the collapsed "icon" dissapears as shown in this screen shot

Click image for larger version.

Name: collapse.png
Views: 118
Size: 25.9 KB
ID: 3225

My markup looks like:

<ext:Panel ID="GraphsContainer" runat="server" Layout="BorderLayout">
<Items>
  <ext:Panel ID="GraphSummaryPanel" runat="server" Title="Link State Changes Summary"
    Icon="ChartBar" Collapsible="True" AnimCollapse="False" Region="West" Padding="15"
    ContextMenuID="ChangeGraphContextMenu">
    <TopBar>
      <ext:Toolbar ID="SummaryToolBar" runat="server" Height="27">
        <Items>
          <ext:Hidden ID="txtHiddenCableId" runat="server" Text='' AutoDataBind="true">
          </ext:Hidden>
          <ext:Hidden ID="txtHiddenCableHighlightLabel" runat="server" Text='' AutoDataBind="true">
          </ext:Hidden>
          <ext:ComboBox Hidden="true" SelectedIndex="0" ID="PeriodSelector" Editable="false"
            LabelWidth="150" runat="server" Width="250px" FieldLabel="Show changes from the last 7 ">
            <Items>
              <ext:ListItem Text="Days" Value="Days" />
              <ext:ListItem Text="Weeks" Value="Weeks" />
              <ext:ListItem Text="Months" Value="Months" />
            </Items>
            <Listeners>
              <Select Handler="SummaryGraph.periodChanged();" />
            </Listeners>
          </ext:ComboBox>
          <ext:ToolbarFill />
        </Items>
      </ext:Toolbar>
    </TopBar>
    <Content>
      <div id="summaryplaceholder" style="width: 100%; height: 300px;">
      </div>
    </Content>
    <Listeners>
      <Resize Fn="Changes.resizeCurrentChart" />
      <Collapse Fn="Changes.setGraphWidths"/>
      <Expand Fn="Changes.setGraphWidths"/>
    </Listeners>
  </ext:Panel>
  <ext:Panel ID="BufferPanel" runat="server" Title="x" Region="Center" Width="1"  />
  <ext:Panel ID="DetailsSummaryPanel" runat="server" Title="Change Details Graph" Icon="ChartLine"
    Region="East" Padding="15" Collapsible="True" TitleCollapse="True">
    <TopBar>
      <ext:StatusBar ID="ChangeGraphStatusBar" runat="server">
        <Items>
          <ext:Button ID="ResetDetailGraph" runat="server" Text="Reset graph zoom" Icon="Zoom">
            <Listeners>
              <Click Handler="DetailsGraph.drawChangeGraph(DetailsGraph.chartData);" />
            </Listeners>
          </ext:Button>
        </Items>
      </ext:StatusBar>
    </TopBar>
    <Content>
      <div id="chartcontainer" style="width: 100%; height: 300px">
      </div>
    </Content>
    <Listeners>
      <Resize Fn="DetailsGraph.resizeDetailsChart" />
      <Collapse Fn="Changes.setGraphWidths"/>
      <Expand Fn="Changes.setGraphWidths"/>
    </Listeners>
  </ext:Panel>
</Items>
<Listeners>
  <Resize Fn="Changes.setGraphWidths"/>
</Listeners>
</ext:Panel>

And my "setGraphWidths" code:

  setGraphWidths: function () {
    console.log("Setting the graph widths");

    var fullWidth = GraphsContainer.getWidth();
    if (GraphSummaryPanel.collapsed && !DetailsSummaryPanel.collapsed) {
      DetailsSummaryPanel.setWidth(fullWidth - 30);
    } else if (!GraphSummaryPanel.collapsed && DetailsSummaryPanel.collapsed) {
      GraphSummaryPanel.setWidth(fullWidth - 30);
    } else {
      GraphSummaryPanel.setWidth(fullWidth / 2);
      DetailsSummaryPanel.setWidth(fullWidth / 2);
    }
    GraphsContainer.doLayout();
  },

Thread: [CLOSED] Collapsible HBox panels?

Thread Tools

Search Thread

Display

Collapsible HBox panels?

Not quite working

Updated markup

Similar Threads

[CLOSED] So many panels and nested panels

[CLOSED] HBox Layout - Possible to wrap components?

HBox Layout in IE7, bug?

[CLOSED] Stackable HBox Panels

[1.0] HBox AlignTOP error

Posting Permissions

Sitemap

Downloads

Resources