PDA

View Full Version : [CLOSED] Can the Center Region be hidden?



cwolcott
Feb 14, 2015, 1:27 AM
Can a center region be hidden and the west and/or east take up the space. The code below doesn't work. What am I missing?

Select 'Hide West' and 'Show West'. Everything looks great.
Select 'Hide Center' and the west/east panels don't take up the space.



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

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

<!DOCTYPE html>

<html>


<head runat="server">
<title>Hiding Panels</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Container runat="server" Region="North" Layout="HBoxLayout" Height="30">
<Defaults>
<ext:Parameter Name="margins" Value="5" Mode="Raw" />
</Defaults>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Component runat="server" Flex="1" />
<ext:Button runat="server" Text="Hide West" OnClientClick="#{WestPanel}.hide();" />
<ext:Button runat="server" Text="Show West" OnClientClick="#{WestPanel}.show();" />
<ext:Component runat="server" Flex="2" />
<ext:Button runat="server" Text="Hide Center" OnClientClick="#{CenterPanel}.hide();" />
<ext:Button runat="server" Text="Show Center" OnClientClick="#{CenterPanel}.show();" />
<ext:Component runat="server" Flex="2" />
<ext:Button runat="server" Text="Hide East" OnClientClick="#{EastPanel}.hide();" />
<ext:Button runat="server" Text="Show East" OnClientClick="#{EastPanel}.show();" />
<ext:Component runat="server" Flex="1" />
</Items>
</ext:Container>

<ext:Container runat="server" Region="Center" Layout="BorderLayout" Flex="1">

<Items>
<ext:Panel ID="WestPanel" runat="server" Region="West" Title="West" Html="West Data"
Collapsible="true" Split="true" Flex="1" CollapseDirection="Left" AnimCollapse="false" />
<ext:Panel ID="CenterPanel" runat="server" Region="Center" Title="Center" Html="Center Data"
Flex="1" Collapsible="true" />
<ext:Panel ID="EastPanel" runat="server" Region="East" Title="East" Html="East Data"
Collapsible="true" Split="true" Flex="1" AnimCollapse="false" />
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>

fabricio.murta
Feb 15, 2015, 2:24 AM
Hello, Chris Wolcott!

That is really tricky. A center region on a BorderLayout is not supposed to be hidden.

Well, if you set your center panel's ColapseDirection to either left or right, you will get almost at it. But not there.

You could also hack into the layout and make the center be no more. Well, now how to get that center back?.. No good.

What do you think if you left the BorderLayout aside and tried a HBoxLayot that does that all plus allows hiding the central region? Well, difference here now is that you don't call the regions, you just use first, second and third, one side by side to the other.

What about seeing how it looks? Change your last container on the sample you provided to this, and tell me what you think.


<ext:Container runat="server" ID="ctn2" Region="Center" Layout="HBoxLayout" StyleSpec="border: solid 1px blue">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="WestPanel" runat="server" Title="West" Html="West Data"
Collapsible="true" Split="true" Flex="1" CollapseDirection="Left" AnimCollapse="false" />
<ext:Panel ID="CenterPanel" runat="server" Title="Center" Html="Center Data"
Collapsible="true" CollapseDirection="Left" Flex="1" />
<ext:Panel ID="EastPanel" runat="server" Title="East" Html="East Data"
Collapsible="true" Split="true" Flex="1" AnimCollapse="false" />
</Items>
</ext:Container>


I hope this achieves the goal you have with your view. If not, just let me know, we'll think on something else.

RCN
Feb 15, 2015, 2:45 AM
Cris, the following example may help you to achieve it: http://examples2.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/

Simply swap (by code), then hide.

cwolcott
Feb 15, 2015, 10:25 PM
Thanks guys for responding. The thread can be closed.

I was looking to have the Panels have a splitter and thus I used a BorderLayout with regions. I had not used the BoxSplitter control before. So I has able to change back to an HBoxLayout and added a BoxSplitter after the west panel.

I also wanted to show the mini-collapse tool, but not actually collapse the west panel, thus I added the attribute PerformCollapse="false".



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

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

<!DOCTYPE html>

<html>


<head runat="server">
<title>Hiding Panels</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.splitter {
background-color: #F0F0F0;
}

.splitterOver {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Container runat="server" Region="North" Layout="HBoxLayout" Height="30">
<Defaults>
<ext:Parameter Name="margins" Value="5" Mode="Raw" />
</Defaults>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Component runat="server" Flex="1" />
<ext:Button runat="server" Text="Hide West" OnClientClick="#{WestPanel}.hide(); #{WestPanelSpliter}.hide();" />
<ext:Button runat="server" Text="Show West" OnClientClick="#{WestPanel}.show(); #{WestPanelSpliter}.show();" />
<ext:Component runat="server" Flex="2" />
<ext:Button runat="server" Text="Hide Center" OnClientClick="#{CenterPanel}.hide();" />
<ext:Button runat="server" Text="Show Center" OnClientClick="#{CenterPanel}.show();" />
<ext:Component runat="server" Flex="2" />
<ext:Button runat="server" Text="Hide East" OnClientClick="#{EastPanel}.hide();" />
<ext:Button runat="server" Text="Show East" OnClientClick="#{EastPanel}.show();" />
<ext:Component runat="server" Flex="1" />
</Items>
</ext:Container>

<ext:Container runat="server" Region="Center" Layout="HBoxLayout" StyleSpec="border: solid 1px blue">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="WestPanel" runat="server" Html="West Data" Header="false"
Collapsible="true" Flex="1" CollapseDirection="Left" AnimCollapse="false" />
<ext:BoxSplitter ID="WestPanelSpliter" runat="server" CollapseTarget="Prev" Cls="splitter"
DefaultSplitMin="200" CollapseOnDblClick="false" OverCls="splitterOver"
PerformCollapse="false" />

<ext:Panel ID="CenterPanel" runat="server" Html="Center Data" Header="false"
Collapsible="true" CollapseDirection="Left" Flex="1" />
<ext:Panel ID="EastPanel" runat="server" Html="East Data" Header="false"
Collapsible="true" Split="true" Flex="1" AnimCollapse="false" />
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>

fabricio.murta
Feb 16, 2015, 3:34 AM
Great! Thanks for sharing the outcome!